css垂直居中整理

04-21

前提：針對父容器、子容器都高寬不定的情況。以下一共有四種方法。

html

<div class="parent"> <div class="child"> </div></div>

方法一： table-cell

思路：把父元素設置為單元格。然後用vertical-align: middle

特點：兼容ie8及以上。

代碼：

.parent{ display: table-cell; /*設置為單元格*/ vertical-align: middle; /*垂直居中*/}.child{ margin: 0 auto; /*水平居中*/}

方法二：absolute+ transform （推薦使用）

思路：絕對定位top 50%，再上移自身高度的50%

特點：兼容到IE7。

代碼：

.parent{ position: relative;}.child{ position: absolute; top:50%; -webkit-transform: translateY(-50%); /* Safari 和 Chrome */ -moz-transform: translateY(-50%); /* Firefox */ -ms-transform: translateY(-50%); /* IE */ -o-transform: translateY(-50%); /* Opera */ transform: translateY(-50%);}

方法三：flex+align-items （不推薦）

思路：設置子元素高度和父元素一樣

特點：兼容差，IE10

代碼：

.parent{ display: flex; /*子元素高度和父元素一樣*/ align-items: center;}

方法四：絕對定位 top:0; left: 0; bottom: 0;right: 0;

思路：由於子容器被絕對定位，脫離了正常的內容流，瀏覽器會給margin-top,margin-bottom相同的值，使元素塊在父容器內居中。比較神奇的一種方法。

特點：兼容IE8

代碼：

.parent{ position: relative;}.child{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}