垂直居中的總結

無需固定高度的方式

用如下的方式，能夠適應任何高度的div實現居中。

方式1：使用jquery.popup.js插件

本人封裝了一個名爲jquery.popup.js的插件，主要是爲了彈窗實現居中顯示問題，還不錯的，簡單易用。特徵：

1. 無需固定高度
2. 有多種效果選擇
3. 須要jQuery的支持，js的調用
4. 支持IE6+

插件放在本git上: http://git.oschina.net/luozt007/FrontEnds 路徑爲：FrondEnds/data/proj-backup/netease/kobe-fis-init/resources/jquery.popup/

方式2：translate50%

設置left:50%; top:50%; transform:translate(-50%,-50%);，特徵：

1. 須要css3支持
2. 無需固定高度
3. 純css，簡單，複用
4. 支持IE9+

方式3：table-cell

利用表格table，而在table-cell裏面設置vertical-align:center，特徵：

1. 無需固定高度
2. 支持IE6+
3. 純css
4. 這時table,table-cell不能用浮動

具體作法：

<style>
.box{vertical-align: middle;}
.target{margin: 0 auto;}
</style>

<table>
    <tr>
        <td class="box">
            <div class="target"></div>
        </td>
    </tr>
</table>

方式4：flex

利用flex佈局的justify-content: center; align-items: center;來實現

##須要固定高度

方式1：負margin

設置top:50%; left:50%; margin-left:width/-2; margin-top:height/-2;。這種方式沒什麼好說，你們都理解，特徵：

1. 純css
2. 支持IE6+

方式2：上下左右都爲0

利用top\right\bottom\left都爲0，特徵：

1. 不支持IE7及如下
2. 純css

添加如下樣式可實現自動居中：

.target{height:300px;}
.abs-center{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

##總結

兼容寫法推薦

高度不固定：推薦使用jquery.popup.js插件的方式 高度固定：推薦使用負margin的方式

現代瀏覽器首選技術的寫法推薦

高度不固定：推薦translate的方式 高度固定：translate方式

---

更多閱讀：

• 解讀CSS佈局之-水平垂直居中
• Flex佈局學習