CSS 垂直居中的七種方法

本文轉自微信公衆號--前端達人

開篇

我之因此整理這類專題的手冊，就是CSS相關的內容實在太零散，同時又夾雜着相關的兼容問題。遇到問題時，咱們有時過分依賴搜索引擎進行求證解決，解決完也沒作認真的概括和總結。再次遇到此類問題時，咱們有可能還不會，這就是我概括這個手冊的目的，我會把平常工做中常常會用到的高頻CSS相關方法概括到這個手冊裏（有的內容可能來源其它做者），歡迎你持續的訂閱和關注。

今天咱們一塊兒來梳理下CSS垂直居中的幾種方法，咱們在佈局一個頁面時，一般都會用到水平居中和垂直居中，處理水平居中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就能夠輕鬆解決掉水平居中的問題，但一直以來最麻煩對齊問題就是「垂直居中」，如下將介紹七種單純利用CSS垂直居中的方式，其實一點也不難(固然跟水平居中比起來難了一點)，只須要理解背後的原理就能夠輕鬆應用。

本篇文章閱讀時間預計5分鐘。

01 設定行高( line-height )

設定行高是垂直居中最簡單的方式，適用於「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設爲inline-block屬性的div，若將line-height設成和高度同樣的數值，則內容的行內元素就會被垂直置中，由於是行高，因此會在行內元素的上下都加上行高的1/2，因此就垂直置中了！不過由此就能夠看出，爲何必需要單行的行內元素，由於若是多行，第二行與第一行的間距會變超大，就不是咱們所指望的效果了。CSS範例：外層div0，內容redbox，讓redbox水平垂直置中。

.div0{
    width:200px;
    height:150px;
    border:1px solid #000;
    line-height:150px;
    text-align:center;
}
.redbox{
    display:inline-block;
    width:30px;
    height:30px;
    background:#c00;
}

02 添加僞元素( ::before、::after )

剛剛第一種方法，雖然是最簡單的方法(適用於單行標題)，不過就是隻能單行，因此咱們若是要讓多行的元素也能夠垂直居中，就需要使用僞元素的方式。在此以前，先解釋一下CSS裏頭vertical-align這個屬性，這個屬性雖然是垂直置中，不過倒是指在元素內的全部元素垂直位置互相置中，並非相對於外框的高度垂直居中。(下面的CSS會形成這種樣子的垂直居中)

.div0{
    width:200px;
    height:150px;
    border:1px solid #000;
    text-align:center;
}
.redbox{
    width:30px;
    height:30px;
    background:#c00;
    display:inline-block;
    vertical-align:middle;
}
.greenbox{
    width:30px;
    height:60px;
    background:#0c0;
    display:inline-block;
    vertical-align:middle;
}
.bluebox{
    width:30px;
    height:40px;
    background:#00f;
    display:inline-block;
    vertical-align:middle;
}

所以，若是有一個方塊變成了高度100%，那麼其餘的方塊就會真正的垂直居中。

.greenbox{
    width:30px;
    height:100%;
    background:#0c0;
    display:inline-block;
    vertical-align:middle;
}

可是咱們總不能每次要垂直居中，都要添加一個奇怪的div在裏頭吧！因此咱們就要把腦筋動到「僞元素」身上，利用::before和::after添加div進到框框內，讓這個「僞」div的高度100%,就能夠輕鬆地讓其餘的div都居中。不過不過不過！div記得要把display設爲inline-block，畢竟 vertical-align:middle 是針對行內元素，div自己是block，因此必需要作更改！

.div0::before{
    content:'';
    width:0;
    height:100%;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    background:#f00;
}

03 calc 動態計算

看到這邊或許會有疑問，若是今天個人div必須是block，我該怎麼讓它垂直居中呢？這時候就必須用到CSS特有的calc動態計算的能力，咱們只要讓要居中的div的top屬性，與上方的距離是「50%的外框高度- 50%的div高度」，就能夠作到垂直居中，至於爲何不用margin-top，由於margin抓到的是水平高度，必需要用top纔會正確。

.div0{
    width:200px;
    height:150px;
    border:1px solid #000;
}
.redbox{
    position:relative;
    width:30px;
    height:30px;
    background:#c00;
    float:left;
    top:calc(50% - 15px);
    margin-left:calc(50% - 45px);
}
.greenbox{
    position:relative;
    width:30px;
    height:80px;
    background:#0c0;
    float:left;
    top:calc(50% - 40px);
}
.bluebox{
    position:relative;
    width:30px;
    height:40px;
    background:#00f;
    float:left;
    top:calc(50% - 20px);
}

04 使用表格或僞裝表格

或許有些人會發現，在表格這個HTML裏，要實現垂直置中是至關容易的，只須要下一行vertical-align:middle就能夠，爲何呢？最主要的緣由就在於table的display是table，而td的display是table-cell，因此咱們除了直接使用表格以外，也能夠將要垂直置中元素的父元素的display改成table-cell，就能夠輕鬆實現，不過修改display有時候也會形成其餘樣式屬性的連動影響，須要當心使用。

HTML：

<table>
    <tr>
        <td>
            <div>表格垂直居中</div>
        </td>
    </tr>
</table>
<div class="like-table">
    <div>假的表格垂直居中</div>
</div>

CSS：

.like-table{
    display:table-cell;
}
td,
.like-table{
    width:150px;
    height:100px;
    border:1px solid #000;
    vertical-align: middle;
}
td div,
.like-table div{
    width:100px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:12px;
    line-height: 50px;
    text-align: center;
    background:#c00;
}
.like-table div{
    background:#069;
}

05 transform

transform是CSS3的新屬性，主要用於元素的變形、旋轉和位移，利用transform裏頭的translateY (改變垂直的位移，若是使用百分比爲單位，則是以元素自己的長寬爲基準)，搭配元素自己的top屬性，就能夠作出垂直居中的效果，須要注意的地方是，子元素必需要加上position:relative，否則就會沒有效果喔。

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(-50%);
    background:#095;
}

06 絕對定位

絕對定位就是CSS裏頭的position:absolute，利用絕對位置來指定，但垂直置中的作法又和咱們正統的絕對位置不太相同，是要將上下左右的數值都設爲0，再搭配一個margin:auto，就能夠辦到垂直置中，不過要特別注意的是，設定絕對定位的子元素，其父元素的position必需要指定爲relative喔！並且絕對定位的元素是會互相覆蓋的，因此若是內容元素較多，可能就會有些問題。

.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
}

07 使用Flexbox

Flexbox可謂是咱們在移動端用的最多的佈局方法，由於大部分現代手機瀏覽器都支持這個方法了。Flexbox，使用align-items或align-content的屬性，輕輕鬆鬆就能夠作到垂直居中的效果喔！

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:#099;
}

「小福利」——因爲flexbox佈局的屬性衆多，如何方便記憶，筆者贈送你們一張圖：

以上就是筆者整理的一些垂直居中的方法，因爲垂直居中每每會動用到修改display這個屬性，每每會在排版上形成一些影響，例如不應用flexbox 的地方若是用了flexbox，不應用table 的地方用了table，不應用inline-block 的地方用了inline-block，後續反而要多寫許多其餘的定位樣式來進行修正，那就有點本末倒置了，所以如何活用這些CSS 垂直居中的方法，就要依據你們的版面結構進行靈活運用囉！