Vertically and horizontally aligned

index.html

<div class="table-cell">
    <h1 class="element">Table Cell</h1>
</div>

<div class="flex">
    <h1>Flex</h1>
</div>

style.scss

.table-cell {
    width: 100%;
    display: table;
    height: 100%;
    margin: 0 auto;
    
    .element {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


// Demo Content
html, 
body {
    height: 100%;
}

div {
    &:nth-child(1) {
        background: yellow;
    }
    
    &:nth-child(2) {
        background: salmon;
    }
}

vertically-and-horizontally-aligned.markdown

Vertically and horizontally aligned

A Pen by Joe Richardson on CodePen.

License.