在我学习的过程中，css中元素实现水平垂直居中还是蛮常用的，下面是我了解到的几种方法，希望对大家有帮助，大家有更好的方法，欢迎大家补充。
元素水平居中的方法我了解到有5种，分别是 绝对定位利用负边距、绝对定位+margin：auto；、弹性盒子Flex、Transform和Table。
首先HTML代码：
<div class="wrap">
<div class="center"></div>
</div>
1、绝对定位，利用负边距。
利用负边距实现元素的水平垂直居中，首先相对于父元素（position：relative；），子元素要position：absolutue；并且子元素要设宽（width）高（height），设置left：50%；top：50%；最后加上负边距，margin-left：width的一半；margin-right：height的一半；。
其实很好理解，子元素绝对定位，那么子元素就是通过自身的边界（margin）相对于父元素进行定位；当我们把left：50%；top：50%；的时候，就相当于子元素的左边界和上边界都在整个界面50%的地方，也可以理解为，子元素左上角的位置水平垂直居中整个界面。那我们就通过负边距来调整子元素中心点代替左上角的位置，来实现子元素水平垂直居中。margin-left：width的一半；margin-right：height的一半；。
上代码：
.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
效果如下：
2、Transform
利用css3中的transform属性
代码如下：
.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
display:flex;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
top:50%;
left:50%;
transform:translate3d(-50%,-50%,0);
}
效果如下：
这种方法不建议在pc端使用，在移动端大可放心使用。这种方法好处就是，不用像方法1通过负边距来实现元素的水平垂直居中。
3、绝对定位+margin：auto；
子元素绝对定位，并且设置子元素top：0；bottom：0；right：0；left：0；margin：auto；
理解一下：当我们给子元素设置top：0；bottom：0；right：0；left：0；浏览器就会重新给子元素分配一个边界框，子元素会填充整个父级元素的可用空间，我们给子元素设置宽高，防止子元素占据父元素整个可用空间。再给子元素加上margin：auto；那么margin-top和margin-bottom一样，margin-left和margin-right一样，子元素就在父元素中水平垂直居中。
代码如下：
.wrap{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.center{
position:absolute;
width:100px;
height:100px;
background-color:black;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
效果如下：
4、弹性盒子Flex
用到css3中的属性，flex布局为弹性布局，只需将父元素设置三个属性即可(display,justify-content,align-items)
代码：
<div class="wrap">
<div class="center">
弹性布局flex
</div>
.wrap{
width:200px;
height:200px;
background-color:green;
display:flex;
display:-webkit-flex;
justify-content:center;
align-items:center;
}
效果：
这种方法比较简洁，不需要给元素设宽高就可以实现水平垂直居中。
5、Table模拟表格效果
<div class="wrap">
<div class="center">
table模拟表格
</div>
情况一：
组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（子元素设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！
.wrap{
width:200px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.center{
display:inline-block;
}
效果如下：
情况二：
对table-cell元素设置百分比（如100%）的宽高值时无效的，但是可以将父元素设置display:table，再将父元素设置百分比宽高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。
.wrap{
width:100%;
height:100%;
display:table;
}
.center{
vertical-align:middle;
text-align:center;
display:table-cell;
border:2px solid red;
}
总结一下：
1.利用负边距方法优点是具有良好的跨浏览器特性，兼容IE6/IE7，但是缺点是不能自适应，需设置子元素的宽高，不支持百分比。
2.利用margin:auto方法支持跨浏览器，支持百分比，但是必须声明子元素的width或height(至少一项，不然会占据父元素所有空间)。
这两种绝对定位的方法，可在子元素中设置overflow：auto；来防止内容越界溢出。
3.利用flex或transform方法的好处是代码量少，且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开，优雅地溢出。但flex IE8/IE9不支持，transform IE8不支持，且属性需要写浏览器厂商前缀。
4.table方法的好处是没有空间的限制，可以根据元素内容动态的改变高度，素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下无法正常运行，结构也更复杂。