老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢？
基本HTML
<div class="father"> <div class="child"> </div></div>根据如上结构，通过css实现水平垂直居中。
绝对定位
利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高，使用数值或者百分比的方式进行定位。
方法1
.father { width: 100px; height: 100px; background-color: grey; position: relative;}.child { width: 50px; height: 20px; background-color: red; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}通过设置四向为0和margin: auto实现。
方法2
.father { width: 100px; height: 100px; background-color: grey; position: relative;}.child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; margin: -10px -25px;}通过设置left和top使child左上角位置移动到中间，然后再移动自身宽高一般使child中心至中间。
方法3
.father { width: 100px; height: 100px; background-color: grey; position: relative;}.child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}方法4
.father { width: 100px; height: 100px; background-color: grey; position: relative;}.child { width: 50px; height: 20px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-25px, -10px);}总结
这几种方法使用了绝对定位，margin或者transform来使子元素水平垂直居中，根据是否知道具体宽高来使用margin或者transform。
弹性盒子
方法5
.father { width: 100px; height: 100px; background-color: grey; display: flex;}.child { width: 50px; height: 20px; background-color: red; margin: auto;}方法6
.father { width: 100px; height: 100px; background-color: grey; display: flex; justify-content: center; align-items:center;}.child { width: 50px; height: 20px; background-color: red;}总结
这两种使用了flex弹性盒子布局来实现，随着浏览器兼容性的普及，弹性盒子也越来流行了。
table-cell
方法7
.father { width: 100px; height: 100px; background-color: grey; display: table-cell; text-align:center; vertical-align: middle;}.child { display:inline-block; width:50px; height:20px; background-color: red;}使用了table-cell以及行内块元素来实现
行内元素
方法8
.father { width: 100px; height: 100px; background-color: grey; text-align:center;}.child { display:inline-block; width:50px; height:20px; background-color: red; vertical-align: middle;}.father:after{ content:''; width:0; height: 100%; display: inline-block; vertical-align: middle;}利用伪元素撑开高度垂直居中。
方法9
.father { width: 100px; line-height: 100px; background-color: grey; text-align: center;}.child { display: inline-block; width: 50px; height: 20px; background-color: red; vertical-align: middle;}利用父元素line-height与inline-block子元素vertical-align垂直居中
相对定位
方法10
是不是有点疑惑为啥1、2、3都要用absolute来定位，用relative不行吗？
答案是可以的。????
.father { width: 100px; height: 100px; background-color: grey;}.child { width: 50px; height: 20px; background-color: red; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}方法11
.father { width: 100px; height: 100px; background-color: grey;}.child { width: 50px; height: 20px; background-color: red; position: relative; left: 50%; top: 50%; transform: translate(-25px, -10px);}总结
其实要想水还很再水出方法12、方法13等等，但是主要问题并不在这里，我觉得大家都喜欢问垂直居中问题的主要目的，还是想考验大家对基础css的了解，定位、布局、元素等，比如说相对布局和绝对布局，比如说块级元素和行内元素，比如说margin和padding，比如说百分比的参照者，比如说伪元素的运用，比如说transform用法等等。
最主要考察的是对这些基础实际运用能力和理解能力，并不是说面试官真的想知道你了解多少种垂直居中的方法，他只是想了解一下面试者css的基础罢了。
随手一个方法12
.father { width: 100px; height: 100px; background-color: grey;}.child { width: 50px; height: 20px; background-color: red; margin: auto;}.father:before { content: ""; width: 0; height: calc(50% - 10px); display: block; vertical-align: middle;}