一直以來，前端開發過程中本人遇到最多，最煩的問題之一是元素如何垂直居中，發現開發過程中，元素的垂直居中一直是個很大的麻煩事，經常發現PC端和電腦模擬元素都垂直居中了，但是遇到移動端真機總是會出現層次不窮的問題，讓人頭大不已。因此我決定好好研究下究竟如何正確讓元素垂直居中。
下面是我的研究過程：
基礎
一、元素父級為"block"，沒有固定高度，靠padding等自動撐開高度
【小結：元素均會自動垂直居中】
二、元素父級為"block"，有固定高度
【小結：需要給父級設置固定行高，如需相對父級垂直居中，行高應與父級高度一致】
三、元素父級為"inline-block"，沒有固定高度，靠padding等自動撐開高度
【小結：與父級為"block"時一樣，元素均會自動垂直居中】
四、元素父級為"inline-block",有固定高度
【小結：與父級為"block"時一樣，需要給父級設置固定行高，如需相對父級垂直居中，行高應與父級高度一致】
五、元素父級為"inline"，沒有固定高度，靠padding等自動撐開高度
【小結：與父級為"block"時一樣，元素均會自動垂直居中】
總結：無論父級元素是塊級、內聯還是內聯塊級，在沒有固定高度的情況下，其下面的子集（無論是內聯或內聯塊級）均會自動垂直居中。在有固定高度的情況下，需要給父級添加行高"line-height"樣式即可。
多層嵌套
（為了不廢話，之后的不再做單獨的固定高度影響的演示，只做文字說明）
一、元素父父級為"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
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接