本文转载自 https://www.cnblogs.com/jiekk/p/5802147.html，个人参考着实现了效果并总结如下，如果喜欢请给原作者评论分享~
1.引言
div的垂直水平居中应该是很常见的问题了，网上的方法也很多~总之就是要实现下图这个效果：
我们慢慢来，先看看实现这个效果真正的难点（坑）在哪里~先不说具体的实现，很多人应该都熟悉margin：0 auto这个“标配”吧？这是让div的上下margin变成0，左右margin自动计算，加上这一句很容易就能实现div的水平居中~不过为什么不把上下左右的margin全部设置成auto呢？这样不就上下左右都居中了？
那么我来解释一下：
首先，div是一个块级元素，宽度默认都是相对于父元素的100%，即：一个块元素，如果我们不人为的去设置它的宽度，他就单独占一行！换句话说，这一行就只有他一个元素！想让他水平居中，左右margin设置成auto后底层很容易就可以计算出margin具体的数值应该是多少，从而达成左右居中。说到这里，我们再去考虑垂直居中：页面在垂直方向上块级元素不一定只有一个，即块级元素没有“默认占一列”这样的规定，因此即使把margin设置成auto，也不能自动计算出margin到底该是多少......
了解了以上问题，我们便可以把中心转移到垂直居中上面了~
2.实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div居中</title>
<link rel="stylesheet" type="text/css" href="test.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="outerDiv" style="width:250px;height:350px;border: 2px solid red;">
<div class="innerDiv" style="width: 150px;height: 150px;background-color: green;">
</div>
</div>
</body>
</html>
这是基本的布局（还没有实现居中），为了直观，我把居中相关的样式 作为外联样式，其他的直接直接作为内联样式。
法1：利用display：table-cell（兼容IE8+）
.outerDiv{
display: table-cell;
vertical-align: middle;
}
.innerDiv{
margin: 0 auto;
}
原理：改变父元素基线的位置，而子元素基线都是自动与父元素基线在一行的。子div再加上margin：0 auto保证自己水平居中即可
缺点：对父元素的限制（无法设置margin等），兼容IE8及以上（因为IE8以前的display不支持table-cell）
优点：同时有多个子元素也可以居中
思考 1：只写vertical-align：middle可以完成子元素垂直居中吗？
Answer：No！为什么？因为：
vertical-align是用来定义行内元素（inline）的基线相对于该元素所在行的基线的垂直对齐，也就是说，vertical-align的作用是调整当前元素（前提他是行内元素，或者有行内元素的特性）基线的位置，而这个元素的子元素默认都是跟基线对齐的。vertical-align是行内元素的一个属性（但是div是块级元素！）。
因此，我们要想办法让父元素有inline的属性，也就是让他变成table-cell！
思考 1.1：如果不是table-cell，还有什么方法让父元素具有行内元素特性？
Answer：当然可以直接把父元素设置成display：inline，但是他也就完完全全是一个行内元素了，无法设置高度，宽度，margin这些......还有一点需要注意，设置成inline-block是不行的，div本身的内容还是块级元素的特性。其他的方法我暂时没有想到了......
法2：利用相对定位和绝对定位
第一种写法：
.outerDiv{
position: relative;
}
.innerDiv{
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
第二种写法：
.outerDiv{
position: relative;
}
.innerDiv{
position: absolute;
left: 50%;
top:50%;
margin-left: -75px;/*子div宽度的一半*/
margin-top: -75px; /*子div高度的一半*/
}
原理：把父元素设置成非静态元素，让子元素可以相对它来进行绝对定位完成居中
优点：兼容性好
缺点：子元素只能有一个
3.小结
关于这几种方法，法1是原理比较难理解的，法2是比较常见的，当然具体选用哪种方法看各自的需要，需要多个子div居中选法1，一个选法2，个人认为法1的兼容性不是很突出的缺点~
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)