Table-Cell

Center Elements in an Element

CSS / SCSS

.display-table {
    display: table;
    width: 100%;
    height: 100%;
    .display-table-cell {
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
        &.left {
            text-align: left;
        }
        &.right {
            text-align: right;
        }
        &.top {
            vertical-align: top;
        }
        &.bottom {
            vertical-align: bottom;
        }
    }
}

HTML

<div class="display-table">
        <div class="display-table-cell">
                <p>I am Centered</p>
        </div>
</div>