div水平垂直居中的方法总结
近段时间在忙于编写静态页面，常常遇到DIV需要垂直居中的情况，下面针对DIV的水平垂直居中做总结，分享出来，一起探讨，这也是自己知识点记录的一种方式。
我们都知道元素水平居中最好使的是：
margin: 0 auto;元素水平垂直居中：
一，位置定位（元素宽高已知）
1.父元素：position：relative;
2.子元素：position：absolute; 距上50％，距左50％，元素的上，左外边距为自身宽高的负1/2。
（兼容性好，但必须知道宽高）
例：
<div class =“boxSet”>
<div class =“contentSet”> </ div>
</ div> .boxSet {
width：500px;
height：500px;
background-color: #FFAD41;
position：absolute;
}
.contentSet {
width：100px;
height：100px;
background-color: #F86F14;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}二，位置+变换（元素宽高未知）
1.父元素：position：relative;
2.子元素：position：absolute; 距上50％，距左50％，元素相对自身的偏移度为负50％。
（兼容性不好，支持IE9 +的浏览器）
例：
<div class =“boxSet”>
<div class =“contentSet”> position + transform </ div>
</div>.boxSet {
position: relative;
}
.contentSet {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}三，position + margin：auto;（元素宽高已知）
1.父元素：position：relative;
2.子元素：position：absolute;元素距上，下，左，右都为0，元素的margin值为auto。
（兼容性较好，支持IE7 +的浏览器）
例：
<div class =“boxSet”>
<div class =“contentSet”> </ div>
</div>.boxSet {
position: relative;
}
.contentSet {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}四、inline-block（若干子元素，且元素宽高已知）
1.设置子元素为行内块元素,让他们都排成一行， display:inline-block；
2.给它的父容器加一个text-align:center的样式，设置行高为父元素的高。
（兼容性较好,这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中）
例：
<div class="boxSet">
<div class="contentSet"></div>
<div class="contentSet"></div>
<div class="contentSet"></div>
</div>.boxSet{
width: 500px;
height: 500px;
background-color: #FFAD41;
text-align: center;
line-height: 500px;
}
.contentSet{
width: 100px;
height: 100px;
background-color: #F86F14;
display: inline-block;
}五、flex布局（元素宽高未知）
例：
<div class="boxSet">
<div class="contentSet">flex布局</div>
</div>.boxSet{
width: 500px;
height: 500px;
background-color: #FFAD41;
display: flex;
justify-content: center;
align-items: center;
}
.contentSet{
background-color: #F86F14;
}六、inline-block+vertical-align+伪类实现（元素宽高未知）
例：
<div class="boxSet">
<div class="contentSet">inline-block+vertical-align+伪类实现</div>
</div>.boxSet{
width: 500px;
height: 500px;
text-align:center;
background-color: #FFAD41;
height:600px;
}
.boxSet:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-right:-0.25em;
}
.contentSet{
display:inline-block;
vertical-align:middle;
max-width: 90%;
background-color: #F86F14;
}七、table-cell
1.table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了。不推荐使用。
（ie8及以下不支持）
例：
<div class="box boxSet">
<div class="content contentSet">
<div class="inner"></div>
</div>
</div>.boxSet{
background-color: #FF8C00;
width: 300px;
height: 300px;
display: table;
}
.contentSet{
background-color: #DEB1F8;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
background-color: #F5B9F0;
display: inline-block;
width: 20%;
height: 20%;
}