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屬性將失效。