Css-淺談如何將多個inline或inline-block元素垂直居中

 

          一直以來，前端開發過程當中本人遇到最多，最煩的問題之一是元素如何垂直居中，發現開發過程當中，元素的垂直居中一直是個很大的麻煩事，常常發現PC端和電腦模擬元素都垂直居中了，可是遇到移動端真機老是會出現層次不窮的問題，讓人頭大不已。所以我決定好好研究下究竟如何正確讓元素垂直居中。

下面是個人研究過程：

      基礎      

1、元素父級爲"block"，沒有固定高度，靠padding等自動撐開高度

【小結：元素均會自動垂直居中】

2、元素父級爲"block"，有固定高度

【小結：須要給父級設置固定行高，如需相對父級垂直居中，行高應與父級高度一致】

3、元素父級爲"inline-block"，沒有固定高度，靠padding等自動撐開高度

【小結：與父級爲"block"時同樣，元素均會自動垂直居中】

4、元素父級爲"inline-block",有固定高度

【小結：與父級爲"block"時同樣，須要給父級設置固定行高，如需相對父級垂直居中，行高應與父級高度一致】

5、元素父級爲"inline"，沒有固定高度，靠padding等自動撐開高度

【小結：與父級爲"block"時同樣，元素均會自動垂直居中】

總結：不管父級元素是塊級、內聯仍是內聯塊級，在沒有固定高度的狀況下，其下面的子集（不管是內聯或內聯塊級）均會自動垂直居中。在有固定高度的狀況下，須要給父級添加行高"line-height"樣式便可。

---

 

     多層嵌套     

（爲了避免廢話，以後的再也不作單獨的固定高度影響的演示，只作文字說明）

 

1、元素父父級爲"block"，父級爲"inline-block"

【小結：當父父級爲"block"時，不管父級元素是塊級、內聯仍是內聯塊級，在沒有固定高度的狀況下，其下面的子集（不管是內聯或內聯塊級）均會自動垂直居中。在父父級和父級同時或單獨添加高度，須要給有固定高度的父父級或父級添加行高"line-height"，這一點與以前的總結基本是一致的。】

總結：以後我對元素父父級與父級均爲"inline-block"和元素父父級爲"inline"，父級爲"inline-block"等作了測試，結果發現，不管父父級元素爲何類型，均與以前的總結是一致的，只須要看元素的父級的模式便可。

 

---

 

     最後，錯綜複雜（重點）     

 

 

---

 

       綜上所述：      

• 父父級-父級-子集式 || 父級-子集式：管他父級仍是父父級，無固高不用管，有固高加行高
• 父父級-混合父級-混合子集式：什麼都別管，先給全部內聯塊級父子集加{ vertical-align: middle; }樣式，還有不對齊的往他前面塞個高度100%的內聯塊級元素，並添加{ vertical-align: middle; }樣式，完美

 

---

 

• PS：研究之餘，發現一個兼容性問題，即當元素爲inline時，IOS與除IE外的PC瀏覽器均顯示正常，可是在安卓手機中若是你夠仔細你會發現他有2px的padding-bottom，IE中有1px的padding-bottom。不信，你瞧瞧下面這個，坑了吧，固然了這個範圍仍是將就可以湊合吧，若是比較較真的呢，你就本身想一想辦法吧！

IOS和IE外的PC瀏覽器查看正常

安卓手機查看正常

IE查看正常

 

html原文在個人github中【LayoutSimple Demo】中，須要查看代碼的能夠移步這裏查看

 

做者：leona

原文連接：http://www.javashuo.com/article/p-srtgjbjd-hs.html