今天看了一篇文章，面试官面试一个有三年经验的面试者，其中一个问题就是：有哪些方式可以实现垂直水平居中的方式？
结果面试者就是知道有一个flex布局，支支吾吾也没有说清楚。所以我准备整理一下常用的居中方式：
效果：
1.使用absolute盒子没有指定宽度和高度,再配合css3里的transform属性实现
//代码 <body > <div> <h2>我是一个垂直水平居中的元素</h2> <br/> <br/> </div> </body> //样式 div{ left: 50%; top:50%; position: absolute; background: cadetblue; transform: translate(-50%, -50%); }2.使用absolute盒子指定宽度和高度，再配合margin-top和margin-left来实现
//代码 <body > <div> <h2>我是一个垂直水平居中的元素</h2> <br/> <br/> </div> </body> //样式 div{ width: 400px; height: 200px; left: 50%; top:50%; position: absolute; background: cadetblue; margin-top: -100px; margin-left: -200px; }3.使用absolute盒子指定宽度和高度，再配合margin为auto来实现
//代码 <body > <div> <h2>我是一个垂直水平居中的元素</h2> <br/> <br/> </div> </body> //样式 div{ width: 400px; height: 200px; background: cadetblue; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }注意：由于是使用弹性盒子，一般我们会给父布局设置宽度和高度，如果不设置高度，父布局高度和子布局高度一样，就看不出效果，用时使用flex要注意弹性盒子在浏览器的兼容
//代码 <div class="div"> <div> <h2>我是一个垂直水平居中的元素</h2> <br /> <br /> </div> </div> //样式 .div { height: 600px; width: 100%; display: -webkit-flex; display: flex; background: rgb(14, 236, 106); } div { background: cadetblue; width: 400px; height: 200px; margin: auto; }效果：
