你會用CSS實現垂直居中嗎？

原文鏈接：Can you vertically center in CSS?

作者：Usama Tahir

翻譯：Klaus

聲明：轉載請註明出處。

如何用CSS（層疊樣式表）實現垂直居中呢？這可能是網站開發人者最常問的問題之一了，不論他是有一些經驗的開發者還是剛開始學習。

所以，實現垂直居中最好的方法是什麼呢？這裡有不止一種方法可以實現。但是你應該選擇一種瀏覽器支持最好的以及最容易實現的。

首先我們會介紹那些瀏覽器支持比較好的方法，結尾部分會介紹那些瀏覽器支持較差的方法。

讓我們開始吧……

用絕對定位實現垂直居中

我們有一張圖片，並且想讓它居中，首先我們需要創建一個div容器去包裹它，然後給它定義一些樣式。

HTMLn-----nn<div>n <img src=」http://bit.ly/2jeCm3H" alt=」」 />n</div>n

-----nCSSn-----nnbody{n background: #ccc; /* just to make it visible in screenshots */n}ndiv{n width: 300px;n height: 250px;n background: #fff;n}nimg{n width: 100px;n}n

現在我們有了一張包裹在div中的圖片，我們給不光給圖片以及div元素定義了尺寸，還給div元素定義了#fff的背景色。

現在我們需要給我們的父元素添加相對定位屬性，同時，要給子元素也就是圖片元素添加絕對定位屬性。

div{n width: 300px;n height: 250px;n background: #fff;n position: relative;n}nimg{n width: 100px;n position: absolute;n}n

現在，我們會將子元素的top屬性設置為50%。

div{n width: 300px;n height: 250px;n background: #fff;n position: relative;n}nimg{n width: 100px;n position: absolute;n top: 50%;n}n

目前為止圖片還沒有實現垂直居中，現在我們需要給它一個負的margin-top值，這個值為你想要實現垂直居中的元素高度的一半，在本例中就是那張圖片。

*如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。——譯者注

div{n width: 300px;n height: 250px;n background: #fff;n position: relative;n}nimg{n width: 100px;n position: absolute;n top: 50%;n margin-top: -50px; /* half the size of image */n}n

記住：如果你想要同時實現水平居中，那麼你可以用實現垂直居中的一樣的技巧來實現。

利用Display: table;來實現垂直居中

是的，你沒聽錯！我們可以通過display屬性的table值來實現垂直居中。如何實現呢？我這就告訴你。

首先我們先要創建一個div元素以及另外一個包含圖片的div元素，然後我們開始設置它的樣式。

HTMLn-----nn<div>n <div id="img"><img src="http://bit.ly/2jeCm3H" alt="" /></div>n</div>n

-----nCSSn-----nnbody{n background: #ccc; /* just to make it visible in screenshots */n}ndiv{n width: 300px;n height: 250px;n background: #fff;n}nimg{n width: 100px;n}n

現在，我們需要給我們的父元素設置display屬性為table。

div{n width: 300px;n height: 250px;n background: #fff;n display: table;n}nimg{n width: 100px;n}n

現在，把包裹圖片的那個div元素的display屬性設置為table-cell。

div{n width: 300px;n height: 250px;n background: #fff;n display: table;n}nimg{n width: 100px;n}ndiv#img{n display: table-cell;n}n

但是現在好像還沒有居中，對吧？當然啦，為了實現垂直居中，我們現在要做的就是給包裹圖片的div元素設置vertical-align: middle;屬性。

div{n width: 300px;n height: 250px;n background: #fff;n display: table;n}nimg{n width: 100px;n}ndiv#img{n display: table-cell;n vertical-align: middle;n}n

使用flex實現垂直居中

最後但是也同樣重要的是，你可以利用flex實現垂直居中。flex可能不是實現水平垂直居中最好的選擇，因為IE8,9並不支持它。

你可以點這裡看看瀏覽器是否支持：點擊這裡

現在，為了用flex實現垂直居中，我們首先要創建一個包裹著圖片的div元素，然後給它定義一些基礎屬性。

HTMLn-----nn<div>n <img src=」http://bit.ly/2jeCm3H" alt=」」 />n</div>n

-----nCSSn-----nnbody{n background: #ccc; /* just to make it visible in screenshots */n}ndiv{n width: 300px;n height: 250px;n background: #fff;n}nimg{n width: 100px;n height: 100px; /* you must give height so it doesnt expand */n}n

現在，我們需要把div元素的display屬性設置為flex。

div{n width: 300px;n height: 250px;n background: #fff;n display: flex;n}nimg{n width: 100px;n height: 100px; /* you must give height so it doesnt expand */n}n

現在還沒居中是吧？繼續，現在我們需要做的就是給div添加另外一條屬性align-items: center;

div{n width: 300px;n height: 250px;n background: #fff;n display: flex;n align-items: center;n}nimg{n width: 100px;n height: 100px; /* you must give height so it doesnt expand */n align-items: center;n}n

或者你可以tweet去聯繫@AmJustSam

如果你沒有讀過我以前寫的如何水平居中的文章的話，你可以現在去讀一下，你只需要點擊這裡

Keep Coding….