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}

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

 

 

 

总结一下：我通常都是用第五或者第六种写法，如今flex布局的浏览器支持愈来愈普遍了，并且这样布局的话，有几个好处：

1 不须要考虑子元素的自己的height和width,容易复用，特别是写UI组件的时候

2 不须要顾及子元素自己是块状元素仍是内联元素仍是内联块状元素（例如图片），它均可以居中

注意，设为Flex布局之后，子元素的float、clear和vertical-align属性将失效。