Vertically center heading element and group of inline divs using flexbox

Question

I have one <h1> element and three divs with 33% width. All those 4 elements are in a container with height set to 100vh.

At the moment I can align horizontally the three divs but when I insert the <h1> tag it aligns next to them.

How can I align the <h1> on top and the three elements below it just in the center of the page?

.outside {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inside {
  background-color: yellow;
  width: 30%;
  margin-left: 1.5%;
  margin-right: 1.5%;
  float: left;
}

<div class="outside">
  <div>
    <h1> This is another</h1>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>

</div>

My JSFiddle is here

matmik · Answer 1 · 2016-05-26T18:55:35.830

2

Its because your h1 is inside the "outside" div, the same way as the yellow boxes are. So you need to add another div, one for containing the h1, and one for containing the yellow boxes.

So the structure would be something like this:

<div class="container">
  <div class="h1"><h1>hello</h1></div>
<div class="yellowcontainer">
  <div class="yellows"><h1>yellow</h1></div>
</div>
</div>

and then add flex only to div class h1 and yellowcontainer, because if you add it to the entire container, your h1 and yellowcontainer are going to want to be next to each other.

edited May 26 '16 at 18:55

answered May 26 '16 at 18:51

matmik

590
1
4
14

Matmik that's what I thought as well but is seems it didn't work for me – John May 26 '16 at 18:53
Edited my answer a bit. The main thing is that you have structured it a little off! – matmik May 26 '16 at 18:56

score 1 · Answer 2 · answered May 26 '16 at 18:57

You can set different width or flex values and reset margins to allow container go to center.

https://jsfiddle.net/qdp1g7r0/6/

.outside {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.inside {
  background-color: yellow;
  flex:1 1 30%;
  margin:0  1.5% auto;

}

.outside > div:first-of-type {
 flex:1 1  100%;
 margin:auto 0 0;

}

<div class="outside">
  <div>
    <h1> This is another</h1>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>

</div>

score 0 · Answer 3 · edited May 23 '17 at 11:59

Divide the h1 and .inside elements into two different sections within the .outside element.
Set .outside to flex-direction: column.
Set container for .inside to flex-direction: row (default setting)
Also, avoid using percentages on margin and padding in a flex container (explanation).

.outside {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: red;
  flex-direction: column;     /* new; overrides default flex-direction: row */
}

section {
  display: flex;             
  flex-direction: row; 
}

.inside {
  width: 30%;
  margin-left: 1.5%;          /* not recommended; don't use percentage margin ... */
  margin-right: 1.5%;         /* or padding on flex items... */
  background-color: yellow;   /* https://stackoverflow.com/a/36783414/3597276 */
}

<div class="outside">
  <h1>This is another</h1>
  <section>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
  </section>
</div>

Revised Fiddle

Are you still looking for an answer to your question? If I misunderstood the problem let me know. — Michael Benjamin, Dec 23 '16 at 18:22

Vertically center heading element and group of inline divs using flexbox

3 Answers3