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:
Actual:
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>