运用纯CSS完成垂直居中的7大气法示例

序言

记得有次找工作中招聘面试的情况下，1招聘面试官问了1个CSS层面的难题：怎样让元素在访问器对话框中左右上下垂直居中。我记恰当时给了个回答是，先用JS获得访问器对话框高宽比，随后给body设定line-height为对话框高宽比并设定text-align:center， 接着再设定该元素display:inline-block和vertical-align:middle。唉，如今想一想自身都感觉累。

难道说就1定要用到JS吗？就不可以有1种只用CSS方式就可以完成元素垂直居中的方式吗？回答是，有！并且方式远不止1种！

1、line-height垂直居中法

父元素：text-align: center; line-height:600px; font-size: 0;

子元素：display: inline-block; vertical-align: middle;
 

注：600px务必为父元素的高宽比，这里还需留意的1点是font-size需设为零，若未写该特性将致使元素其实不能精准竖直垂直居中。该方式即为我招聘面试时所答的方式，缺陷很显著，父元素高宽比须明确。（适配IE8+）

2、table-cell垂直居中法

父元素：display: table-cell; text-align: center; vertical-align: middle;

子元素：display: inline-block;
 

注：适配IE8+

3、左右上下精准定位+margin垂直居中法

父元素：position: relative;

子元素：position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
 

注：适配IE8+

4、50%精准定位+margin垂直居中法

父元素：position: relative;

子元素：position: absolute; left: 50%; top: 50%; margin: ⑵00px 0 0 ⑵00px;
 

注：200px须为该子元素的宽高的1半。比如该子元素宽为100px，高为50px，那末margin赋值为⑵5px 0 0 ⑸0px。该方式缺陷是须明确子元素宽高。（适配IE8+）

5、50%精准定位+translate垂直居中法

父元素：position: relative;

子元素：position: absolute; left: 50%; top: 50%; transform: translate(⑸0%,⑸0%);
 

注：该方式应用了CSS3 transform特性，合适用于挪动端。（适配IE9+）

6、Flexbox垂直居中法

父元素：display: flex; justify-content: center; align-items: center;
 

注：该方式应用了Flexbox延展性合理布局，挪动端适配性也存在很大难题。（适配IE10+）

7、Flexbox+margin垂直居中法

父元素：display: flex;

子元素：margin: auto;
 

注：同上，适配IE10+

总结

以上便是今日所要详细介绍的7种纯CSS垂直居中方式，都有各的优缺陷，须依据具体状况挑选最好计划方案，期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助，假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用。