css垂直居中

從事前端工作已經一年半了，但是感覺自身進步的速度有點慢，遂決定通過記錄的方式來督促自己學習。

在工作中經常會遇到需要元素垂直居中的問題，通過在網上尋找答案，總結一下解決方法：

1、vertical-align:middle

vertical-align只對行內元素起作用，關於vertical-align的詳細說明可參考：

這個屬性我一般用於和文字之間的對齊方式

2、line-height

通常適用於文字的且固定高度的垂直居中，例如：

我是一段測試文字

給p設定樣式：p

結果如圖：

給p增加乙個屬性 line-height:30px; 結果如圖：

3.通過position:absolute

適用於固定高度的元素

將內層元素設定為絕對定位，例如: 內層子元素需要垂直居中，寬度100，高度為100px,設定top:50%,margin-top:-50px; 水平居中同理:left:50%；margin-left:-50px;

4.使用css3屬性:transform:translate()

適用於不定寬高的居中

position:absolute; top:50%; left:50%; transform:translate(-50%，-50%); -webkit-transform:translate(-50%，-50%); -moz-transform:translate(-50%，-50%);

5.display:flex

設定父元素的display:flex; display: -webkit-flex; display: -moz-flex; justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中

文章僅作為自己的專案總結，敘述的比較簡單，如有錯誤，還望指正。