CSS垂直居中實現(xiàn)方法大全

    摘要：
    在我們制作頁面的時候經(jīng)常會遇到內(nèi)容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優(yōu)缺點，可以選擇自己喜歡的方式。以下代碼都經(jīng)過本人親自測試。
    line-height：
    代碼如下:
    <style>
    .content {
    height:240px;
    line-height: 240px;
    }
    </style>
    <div>
    vertical-align:middle;
    </div>
    :before：
    代碼如下:
    <style>
    .content {
    height: 240px;
    }
    .child:before {
    content: ' ';
    display: block;
    height: 120px;
    }
    </style>
    <div>
    <div>
    　vertical-align:middle;</p> <p></div></div>
    padding-top：
    代碼如下:
    <style>
    .content {
    height:240px;
    }
    .child {
    padding-top: 120px;
    }
    </style>
    <div>
    <div>
    vertical-align:middle;
    </div>
    </div>
    position:absolute：
    代碼如下:
    <style>
    .content {
    position:absolute;
    height:240px;
    }
    .child {
    position: relative;
    top:50%;
    }
    </style>
    <div>
    <div>
    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>
    小結(jié)：
    以上代碼本人是在chrome下做的測試，可能有些在ie下會有問題，使用時請注意。