css vertical align using flexbox
html:
<div class="wrap">
<div class="centered">
<h3>centered block</h3>
<p>this block does not have height specified</p>
<p>max width specified as 50% of parent element</p>
<p>parent element have height specified 100vh = 100% of the viewport</p>
</div>
</div>
css:
.wrap {
background: #cdf;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.centered {
background: #ffa;
max-width: 50%;
}