css centering element (vertical-align)

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%;

}

• CSS Flexbox layout model
• A Complete Guide to Flexbox by Chris Coyier
• Can I use css flexbox