css 常用的几种垂直居中（包括图片）

<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}

优点：不定高，移动端高效；