下面是我的研究過程：

基礎

一、元素父級為"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。不信，你瞧瞧下面這個，坑了吧，當然了這個範圍還是將就能夠湊合吧，如果比較較真的呢，你就自己想想辦法吧！

html原文在我的github中【LayoutSimple Demo】中，需要查看代碼的可以移步這裏查看

作者：leona

原文鏈接：https://www.cnblogs.com/leona-d/p/10455791.html

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