5 Vertical center css and 5 center css

5 Vertical center css and 5 center css
Abstract:

We often encounter vertical content center requirements when creating pages. Today we share five vertical center methods, each of which has its own advantages and disadvantages. You can choose your preferred method. The following code has been personally tested.

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:

The above code is personally tested in chrome, and may cause some problems in ie. Please pay attention when using it.