Seeking advice on how to vertically center the banner text in the middle of the banner image for a CSS-only psd conversion project. Any ideas on achieving this goal without utilizing flexbox or grid?
header {
background-image: url(../assets/main-banner.png);
background-size: cover;
background-repeat: no-repeat;
/* viewport (screen height), the el is now taking 90% of the browser height */
/* We are doing this since the <header> doesn't have a ton
of content and we want to be able to see the background image. */
height: 90vh;
padding-top: 30px;
}
h1 {
font-family: 'Iceberg', cursive;
font-size: 8rem;
text-align: center;;
line-height: 80px;
text-transform: uppercase;
}
header h2 {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
text-align: center;
text-transform: none;
background-color: rgb(146, 0, 255);
}<header class="clearfix">
<div class="wrapper">
<!-- Navigation STARTS-->
<nav class="main-menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<!-- Navigation ENDS-->
<div class="banner-content">
<h1>Thunder<br>Force<br> Stadium</h1>
<h2>presented by hot cops</h2>
</div>
</div>
</header>