...
CSS, Tutorials

100% height div with vertically aligned middle content with CSS

16 October 2017

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.

Method 1:

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

Method 2:

Another best and easiest way to do it using flexbox:

HTML


<div id="cc_outer">
    
<div id="cc_cell">
       Vertically center aligned using flexbox.
    </div>

</div>

css

#cc_outer {
  height: 100vh;
  display: flex;
  align-items: center;
}

Leave a Comments