How to center div vertically in other div

Question

In my code I have section element with a background image and I want to put a div element over that like this

But I dont know how to put that text over the image. It just sticks over it: Here is my html and css:

* {
  background-color: black;
  font-family: Helvetica;
  color: seashell;
  opacity: 0.9;
  font-size: 22px;
  
}

#mission {
  margin: 0 auto;
  width: 1200px;
  height: 700px;
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
  background-repeat: no-repeat;
}

#mission div {
  background-color: black;
  text-align: center;
  
}

<section id="mission">
  <div>
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
 </section>

The only way to propely do this is with the [flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/). This works also when you don't know the height of the element. It's [supported by all modern browsers](https://caniuse.com/flexbox), and even internet Explorer. — Pieterjan, Sep 12 '21 at 15:43
@Pieterjan I am not sure how you mean that. Should I just assign `display: flex;` to `
` ? — Tknoobs, Sep 12 '21 at 15:51
Normally yes. `display:flex;flex-direction:column;justify-content:center;` — Pieterjan, Sep 12 '21 at 15:56

mplungjan · Answer 1 · 2021-09-12T15:46:11.393

1

You need to make the text position: relative

* {
  background-color: black;
  font-family: Helvetica;
  color: seashell;
  opacity: 0.9;
  font-size: 22px;
  
}

#mission {
  margin: 0 auto;
  width: 1200px;
  height: 700px;
  background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
  background-repeat: no-repeat;
}

#mission div {
  background-color: black;
  text-align: center;

}
.text { position: relative; top: 310px} /* or use calc() to find better placement */

<section id="mission">
  <div class="text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
 </section>

edited Sep 12 '21 at 15:46

answered Sep 12 '21 at 15:38

mplungjan

169,008
28
173
236

Hello, thanks for that answer. It solved my problem.. partly. I dont know why, but somehow now the image isn't appearing any more and there is just a single black background. I checked and it is not from the div element. Do you have any idea how I can fix that? – Tknoobs Sep 12 '21 at 15:49
As you can see in the snippet, it works here. So perhaps I am useing a class you use for something else – mplungjan Sep 12 '21 at 16:01

score 1 · Accepted Answer · edited Sep 12 '21 at 16:07

1

Html:

<div class='parent'>
    <div class='child'></div>
</div>

Css:

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

edited Sep 12 '21 at 16:07

Pieterjan

2,738
4
28
55

answered Sep 12 '21 at 15:55

Sumit Sarkar

112
1
5

score 0 · Answer 3 · answered Sep 12 '21 at 15:42

0

just use bootstrap google how to use bootstrap if you havnt used it yet.

so for the answer what we just call class="my-auto" on the div

answered Sep 12 '21 at 15:42

Shifaz

11
3

This requires the height of the child to be explicitly defined – Pieterjan Sep 12 '21 at 15:44
yes thats right – Shifaz Sep 17 '21 at 06:39

How to center div vertically in other div

3 Answers3