How to center horizontally and vertically headings (flexbox)? - html

Question

I don't know how to put <h1> heading exactly on center of the page using a flexbox.
Here is a link: https://jsbin.com/movevezesi/edit?html,css,output
Desired effect: https://tutorialzine.com/media/2016/06/landing-page-hero.jpg
HTML:
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>
css:

Answer 1

You'll want to nest your flex boxes and change their direction to column. I put together an example using flexbox if you want to continue using that instead of a position 50% hack:
.wrap {
display: flex;
/*
flex-direction: column keeps the nav and
hero in vertical alignment
*/
flex-direction: column;
border: 1px solid red;
height: 500px;
}
.hero {
display: flex;
/*
again, using flex-direction:column to keep
the nested headers in vertical alignment
*/
flex-direction: column;
/*
flex-grow tells .hero to grow along the main
flex axis of its parent. in this case we set
wrap to flex-direction:column, so .hero stretches
vertically
*/
flex-grow: 1;
/*
justify-content sets the children's layout
along the parent's main axis. in this case
the headers will group up in the vertical middle
of .hero
*/
justify-content: center;
/*
align-items sets the children's layout perpendicular
to the parent's main axis. so in this case they'll bunch up
along the horizontal center
*/
align-items: center;
border: 1px solid red;
}
.hero > * {
border: 1px solid black;
/*
without this text-align, the headers would
be centered horizontally, but the text inside those
headers would still be left-aligned
*/
text-align: center;
}
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>

Answer 2

You could use the next class. It will center horizontally and vertically the element.
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="hero centerElement">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
Hoping it helps.