Center both h1 and h2 horizontally and vertically

Question

How do I align an h1 and h2 both vertically and horizontally, while keeping the height 100% of the viewport?

I've added align-items: center; justify-content: center; to the container and text-align: center; vertical-align: center; to the header class. Adding display: block; to either does nothing.

Expected:

How I want it to look

Actual:

How mine looks

What's going one exactly? Is it the navbar?

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.welcome-header {
  text-align: center;
  vertical-align: center;
}

<div id="welcome-section">
  <h1 class="welcome-header">Namaste, Kevin here.</h1>
  <h2 class="welcome-header">And I'm a front-end developer</h2>
</div>

You could look into this similar question https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Nicolas, Aug 30 '18 at 20:25
the `align-items` and `justify-content` properties are for elements with `display: flex;`. Have you tried adding `display: flex;` to your `#welcome-section`? You may also need `flex-direction: column` — zgood, Aug 30 '18 at 20:34

score 0 · Accepted Answer · edited Aug 30 '18 at 20:43

0

If you use flex alignement properties, then the flex display is required.

#welcome-section {
  height: 100vh;
  display:flex;/*this is  what was missing */
  flex-flow:column;/*this is  what was missing too*/
  align-items: center;
  justify-content: center;
}

https://codepen.io/gc-nomade/pen/MqJgVG

body {
  margin:0;
}

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;       /*this is  what was missing */
  flex-flow: column;  /*this is  what was missing too*/
}

.welcome-header {
  text-align: center;
  /*vertical-align: center; useless*/
}

<div id="welcome-section">
  <h1 class="welcome-header">Namaste, Kevin here.</h1>
  <h2 class="welcome-header">And I'm a front-end developer</h2>
</div>

edited Aug 30 '18 at 20:43

Temani Afif

245,468
26
309
415

answered Aug 30 '18 at 20:35

G-Cyrillus

101,410
14
105
129

Thank you - what's the difference between `flex-flow` and `flex-direction`? `flex-direction: column;` had no impact – Kaiwen Lin Aug 30 '18 at 20:40
Flex-flow sets the direction and can also sets behavior wrap or reverse. Flex-direction should work – G-Cyrillus Aug 30 '18 at 22:48

score 0 · Answer 2 · answered Aug 30 '18 at 20:41

Set your parent class to relative

#welcome-section {
  height: 100vh;
  align-items: center;
  justify-content: center;
  position:relative;
}

Then wrap your welcome-header with both your h1 h2 tags And make it absolute and center it:

.welcome-header {
  text-align: center;
  vertical-align: center;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  margin-bottom:20px;
}


<div id="welcome-section">
  <div class="welcome-header">
    <h1>Namaste, Kevin here.</h1>
    <h2>And I'm a front-end developer</h2>
  </div>
</div>

Codepen link

Center both h1 and h2 horizontally and vertically

Expected:

Actual:

2 Answers2