> 前几天面试一家公司，被问到垂直居中的方法，我只答出了margin、table-cell、flex三种。回来之后觉得特别惭愧，于是整理了一下居中的方案做个记录，希望对大家也有帮助。 > 如果哪里写的不对，欢迎指正，非常感谢。 > 改于2021年2月4日，根据目前常用的方案进行了调整。 ## HTML 代码部分 ### 块级元素 ``` html

child

``` ### 行内元素 ``` html

child

``` ## 水平居中 ### 01 行内元素 text-align: center; ```css .parent { text-align: center; } ``` ### 02 块级元素 margin: auto; >（低版本浏览器还需要设置 `text-align: center;`） ```css .parent { text-align: center; } .child { width: 100px; margin: auto; border: 1px solid blue; } ``` > **由于本文主要想记录的是垂直居中的方案，这里水平垂直的其他方案就不做过多记录了。** ## 垂直居中 ### 01 行内元素（单行文字垂直居中）：设置 line-height = height > 很常用，主要用于文字的排版，也可以用于图片元素居中 ```css .parent { height: 200px; line-height: 200px; border: 1px solid red; } ``` ### 02 块级元素：display: flex > 优点：更灵活，也更简洁，可维护性也更强。只要不考虑IE，这个方案几乎是最优选择吧。 > 缺点：如果还在使用IE浏览器的话，flex布局就没那么香了。 ```css .parent { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center; justify-content: center; /*水平居中*/ } .child { background: blue; } ``` ### 03 块级元素：绝对定位 + margin: auto; > 优点：不需要提前知道尺寸，兼容性好 > 缺点：这个方法曾经是我最喜欢用的一个，但是目前已经不建议使用绝对定位 `absolut`了，如果还在用IE开发，这个方法还是比较推荐的。 > 此方法出自张鑫旭老师的博客 [小tip: margin:auto实现绝对定位元素的水平垂直居中](http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/) ```css .parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: blue; } ``` ### 04 块级元素：display: table-cell > 优点：也是一个比较好的实现方式，较简洁 ```css .parent { width: 600px; height: 200px; border: 1px solid red; display: table; } .child { display: table-cell; vertical-align: middle; } ``` 或： >这个方案是在知乎看到的，原文说是淘宝团队的方案： [用 CSS 实现元素垂直居中，有哪些好的方案？ - Gino的回答 - 知乎 ](https://www.zhihu.com/question/20543196/answer/15431282) 张鑫旭老师的博客也有提到过： [我所知道的几种display:table-cell的应用](http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/) ```css .parent { height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; /* *display: block; *font-size: (heightX0.873); *font-family: arial; */ } ``` >同样适用于多行文字的垂直居中处理 HTML代码： ```html

child child child child child child child child child child child child child child child child child child child childchild child child

``` CSS代码： ```css .parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child { display: inline-block; vertical-align: middle; background: blue; } ``` ### 05 块级元素：绝对定位（需要提前知道尺寸） >缺点： > 1. 需要提前知道 `child` 的尺寸，`margin-top: -(高度的一半);` `margin-left: -(宽度的一半);` > 2. 现在已经不建议使用绝对定位 `absolute`，特别是在移动设备上。 > 优点： >兼容性不错，也算是一点小技巧吧。 ```css .parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; background: blue; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; } ``` ### 06 块级元素：绝对定位 + transform > 优点：不需要提前知道尺寸 > 缺点：兼容性一般般 ```css .parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: blue; } ``` ### 07 块级元素：padding > 缺点：如果高度固定，需要提前计算尺寸（只在某些特定情况适用）。 ```css .parent { padding: 5% 0; } .child { padding: 10% 0; background: blue; } ``` ### 08 块级元素：伪元素 >这个方案是先从这位博主的文章中看到： [CSS：使用伪元素做水平垂直居中的微深入研究](https://www.jianshu.com/p/b45f4d8ca372) 然后发现张鑫旭老师的文章中也有提到： [:after伪类+content内容生成经典应用举例](http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/) ```css .parent { width: 300px; height: 300px; border: 1px solid red; text-align: center; } .child { background: blue; width: 100px; height: 40px; display: inline-block; vertical-align: middle; } .parent::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; } ``` ### 09 块级元素：calc() >也是个不错的方法。 >缺点：需要知道child的尺寸，需要计算，同样的，如果还在使用IE的小伙伴，不推荐。 ```css .parent { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child { width: 100px; height: 100px; background: blue; padding: -webkit-calc((100% - 100px) / 2); padding: -moz-calc((100% - 100px) / 2); padding: -ms-calc((100% - 100px) / 2); padding: calc((100% - 100px) / 2); background-clip: content-box; } ``` ### 10 块级元素：改成行内块：inline-block + `vertical-align: middle;` HTML代码： ```html

child

brother

``` CSS代码： ```css .parent { width: 400px; height: 400px; border: 1px solid red; position: relative; } .child, .brother { display: inline-block; vertical-align: middle; } .child { background: blue; font-size: 12px; } .brother { height: 400px; font-size: 0; } ``` ### 其他当然，还有一种方法，就是使用table布局: ```html

content

``` 因为html还要加table等标签，冗余有点多，而且结构也改变了。