Some time we need to make content display vertical align middle. Here we will learn to make vertically aligned middle content with CSS in 100% height div.

HTML

<div id="cc_outer">
    <div id="cc_container">
        <div id="cc_cell">
            Vertically center aligned Content.
        </div>
    </div>
</div>

CSS

#cc_outer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#cc_container {
    height:100%;
    width:100%;
    display:table;
}

#cc_cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
}
There are currently no comments.