css垂直居中

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

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

一、vertical-align:middle

　　vertical-align只對行內元素起做用，關於vertical-align的詳細說明可參考：http://www.zhangxinxu.com/wordpress/?p=813

　　這個屬性我通常用於圖片和文字之間的對齊方式

二、line-height

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

　　<p>我是一段測試文字</p>

　　給p設置樣式：p { background-color:#f00; height: 30px;}

　　結果如圖：

　　給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;//子元素垂直居中

 

文章僅做爲本身的項目總結，敘述的比較簡單，若有錯誤，還望指正。