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

css vertical align using display:table-cell

Should be set height and width in pixels. After adding "display:table-cell;" you can use "vertical-align:middle;"

css:

<style>
.vertical-align {
    background: #cdf;
    height: 300px;
    width: 300px;
    display: table-cell;
    vertical-align: middle;
}
</style>

html:

<div class="vertical-align">
    vertically aligned text
</div>