我知道现在有非常多的水平垂直居中的写法，我就写一些我自己常用的方法，同时说明一下优缺点
<div class="wrapper">
<div class="item"></div>
</div> .wrapper{width:200px;height:200px;}
.item{width:100px;height:100px;}
1 ｀position tranform
.wrapper{position:relative}
.item{position:absolute;top:50%;transform:translateY(-50%);}
优点：item不需要定死高度
缺点：transform需要兼容一下；不过现在transform兼容性还好
2 ｀position margin
.wrapper{position:relative}
.item{position:absolute;top:50%;margin-top:-50px;}
优点：兼容性好，
缺点：item需要定死高度，因为margin-top需要反方向移动自身高度的一半
3 ｀position margin
.wrapper{position:relative}
.item{position:absolute;top:0;bottom:0;margin:auto;}
优点：兼容性好，也不需要定高；
4 ｀display:inline-block ;line-height;vertical-align:middle;
.wrapper{line-height:200px;}
.item{display:inline-block;vertical-align:middle;}
优点：兼容性好，也不需要定高；需要将block变为inline－block
vertical-align:一般都用在子元素上；
5｀ flex align-items justify-content
.wrapper{display:flex;justify-content:center;aligin-items:center}
优点：全部写在父元素上，不定高,移动端高效；
6｀ flex margin
.wrapper{display:flex;}
.item {margin:auto}
优点：不定高，移动端高效；
总结一下：我一般都是用第五或者第六种写法，现在flex布局的浏览器支持越来越广泛了，而且这样布局的话，有几个好处：
1 不需要考虑子元素的本身的height和width,容易复用，特别是写UI组件的时候
2 不需要顾及子元素本身是块状元素还是内联元素还是内联块状元素（例如图片），它都可以居中
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。