css5 ways to achieve vertical centering_html/css_WEB-ITnose

Summary:

When we create pages, we often encounter the need for vertical centering of content. Today we share 5 methods of vertical centering. Each method has its own advantages and disadvantages. You can choose what you like. way. The following codes have been personally tested by me.

line-height:

<style>        .content {            height:240px;            line-height: 240px;        }    </style><div class="content">        vertical-align:middle;    </div>

:before:

<style>        .content {            height: 240px;        }        .child:before {            content: ' ';            display: block;            height: 120px;        }    </style><div class="content">        <div class="child">

　　　　　　vertical-align:middle;</div></div>

padding-top:

<style>        .content {            height:240px;        }        .child {            padding-top: 120px;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>

position:absolute:

<style>        .content {            position:absolute;            height:240px;        }        .child {            position: relative;            top:50%;        }    </style><div class="content">        <div class="child">            vertical-align:middle;        </div>      </div>

display:table-cell;

<style>        #content {            display:table;        }        #child {            display:table-cell;            vertical-align:middle;            height: 300px;        }    </style><div id="content">          <div id="child">                  vertical-align:middle;        </div>      </div>

Summary:

I tested the above code under Chrome. Some of it may have problems under IE. Please pay attention when using it.