/*html部分*/
<div class="container">
<div class="inner"></div>
</div>
1.利用绝对定位和负外边距居中，此种方法需要知道inner元素的宽高
.container{width:500px;height:500px;position:relative;}
.inner{width:100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}
2.利用绝对定位和transform：translate，此种方法不需要知道inner元素的宽高
.container{width:500px;height:500px;position:relative;}
.inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
3.利用绝对定位和margin：auto,此种情况需要知道子元素宽高，不然子元素会占满父元素。
.container{width:500px;height:500px;position:relative;}
.inner{width:100px;height:100px;position:absolute;top;0;left:0;right:0;bottom:0;margin:auto}
4.利用display：table-cell
.container{width:500px;height:500px;display:table-cell;vertical-align:middle;text-align:center}
5.利用display：flex
.container{width:500px;height:500px;display:flex;justify-content:center;align-items:center;}
6.利用display：flex；margin：auto
.container{width:500px;height:500px;display:flex}
.inner{margin:auto}
