CSS居中完整版

翻譯自https://css-tricks.com/centering-css-com...

我將原做者的代碼整理成了Github Repo，而且在持續更新使用CSS居中的方法，歡迎fork和star個人項目css-center-complete。

你們老是會抱怨如何在CSS中居中一個元素。爲何會這麼難呢？呵呵(使用這個來詞翻譯再好不過了)。我認爲問題不在有多難，而是居中在不一樣的場景中有那麼多種方式，很難抉擇到底該使用哪種。

因此，咱們把這些選擇作成一棵樹狀，但願使用起來更簡單吧。

橫向居中

是行內元素或者行內塊級元素？(inline 或者 inline-block)

你能夠將行內元素居中在塊級元素中，就像這樣：

.center-children {
    text-align: center;
}

代碼連接

這個方法對於display屬性爲inline, inline-block, inline-table, inline-flex等的元素都有做用。

塊級元素？

對於塊級元素，能夠經過設置他的margin屬性爲auto來達到居中的效果。前提是要設置一個寬度。若是不設置寬度的話，默認爲100%，就用不着居中了。就像這樣：

.center-me {
    margin: 0 auto;
}

代碼連接

多個塊級元素？

若是須要在一行中居中兩個及以上的塊級元素，最好給他們設置display屬性爲inline-block。下面這個例子是在flexbox中給他們設置display: inline-block;的：

代碼連接

除非你是想多個塊級元素都在各自的頂部，若是是這樣的話，那麼使用amrgin: 0 auto；也能夠；

代碼連接

---

垂直居中

行內元素或者行內塊級元素？(inline 或者 inline-block)

單獨一行

有的時候行內元素很明顯能夠垂直居中。只須要設置它們的上下padding值相等：

.link {
    padding-top: 30px;
    padding-bottom: 30px;
}

若是設置padding不行，並且你想居中的是文本的話，那麼，能夠設置文本的line-height與元素的height相等。

.center-text-trick {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

多行

一、相等的padding對多行的狀況也適用。若是不起做用的話，那麼這個元素或者文本的display屬性多是table-cell。這種狀況下，vertical-align就有做用了。與其它狀況不一樣，這個是用來處理一行內的元素居中的。

代碼連接

二、若是類表格元素的居中不起做用，那麼是否考慮使用flexbox？在flexbox的父元素中居中flexbox子元素就太簡單了。

.flex-center-vertically {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
}

記住只有父級元素有固定的高度，這樣寫纔有意義。

三、若是前面兩種方法都不起做用，可使用ghost element方法。在包含塊裏放置一個高度爲100%的僞元素，這樣，文本就居中了。

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
}

代碼連接

塊級元素

明確元素的高度

不知道網頁佈局的高度簡直是太習覺得常的事情了。各類狀況都會出現：

• 寬度改變，文字重排，高度會改變

• 不一樣的文字樣式的高度也不同

• 不一樣文本的數量的高度也不同

• 固定比例的元素，好比圖片啥的，在改變尺寸的時候也會改變高度等等

可是若是你知道元素的高度就好辦了：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; 
    /* 若是沒有使用border-box的話就只須要關心padding和border了 */
}

代碼連接

不肯定元素的高度

不知道元素高度的狀況下，經過先將他往下移動50%，而後再向上移動他的高度的一半來居中也仍是有可能的。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

代碼連接

是否考慮flexbox？

別太驚訝，使用flexbox就太簡單了

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

代碼連接

---

橫豎都居中

你徹底能夠用各類方式將上面的技術結合起來達到完美居中的效果。但我以爲能夠把這些狀況分爲下面三種：

元素是不是固定的寬高

在使用絕對定位分別設置上下50％和左右50％以後，使用分別等於寬高一半的負邊距就可以跨瀏覽器實現徹底居中了：

.parent {
    position: relative;
}

.child {
    width: 300px;
    height: 100px;
    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -70px 0 0 -170px;
}

代碼連接

不肯定元素的寬高？

若是不知道元素的寬高，那麼可使用transform屬性在兩個不一樣的方向上設置-50%(基於當前元素的寬高)來居中：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

代碼連接

flexbox

要在flexbox中居中，須要用到兩個居中屬性：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

代碼連接

---

總結

通過上面這些方法，咱們徹底可使用CSS來達到完美的居中。