Css-浅谈如何将多个inline或inline-block元素垂直居中⼀直以来，前端开发过程中本⼈遇到最多，最烦的问题之⼀是元素如何垂直居中，发现开发过程中，元素的垂直居中⼀直是个很⼤的⿇烦
事，经常发现PC端和电脑模拟元素都垂直居中了，但是遇到移动端真机总是会出现层次不穷的问题，让⼈头⼤不已。因此我决定好好研究下究竟如何正确让元素垂直居中。
下⾯是我的研究过程：
基础
⼀、元素⽗级为"block"，没有固定⾼度，靠padding等⾃动撑开⾼度
【⼩结：元素均会⾃动垂直居中】
⼆、元素⽗级为"block"，有固定⾼度
【⼩结：需要给⽗级设置固定⾏⾼，如需相对⽗级垂直居中，⾏⾼应与⽗级⾼度⼀致】
三、元素⽗级为"inline-block"，没有固定⾼度，靠padding等⾃动撑开⾼度
【⼩结：与⽗级为"block"时⼀样，元素均会⾃动垂直居中】
四、元素⽗级为"inline-block"，有固定⾼度
【⼩结：与⽗级为"block"时⼀样，需要给⽗级设置固定⾏⾼，如需相对⽗级垂直居中，⾏⾼应与⽗级⾼度⼀致】
五、元素⽗级为"inline"，没有固定⾼度，靠padding等⾃动撑开⾼度
【⼩结：与⽗级为"block"时⼀样，元素均会⾃动垂直居中】
总结：⽆论⽗级元素是块级、内联还是内联块级，在没有固定⾼度的情况下，其下⾯的⼦集（⽆论是内联或内联块级）均会⾃动垂直居中。在有固定⾼度的情况下，需要给⽗级添加⾏⾼"line-height"样式即可。
多层嵌套
（为了不废话，之后的不再做单独的固定⾼度影响的演⽰，只做⽂字说明）
⼀、元素⽗⽗级为"block"，⽗级为"inline-block"
【⼩结：当⽗⽗级为"block"时，⽆论⽗级元素是块级、内联还是内联块级，在没有固定⾼度的情况下，其下⾯的⼦集（⽆论是内联或内联块级）均会⾃动垂直居中。在⽗⽗级和⽗级同时或单独添加⾼度，需要给有固定⾼度的⽗⽗级或⽗级添加⾏⾼"line-height"，这⼀点与之前的总结基本是⼀致的。】
css实现垂直水平居中总结：之后我对元素⽗⽗级与⽗级均为"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
原⽂链接：
版权声明：本⽂版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在⽂章页⾯明显位置给出原⽂链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。