CSS的居中是眾多CSS難點的代表。為啥用CSS居中這麼難呢？但是我認為這個問題其實並沒有那麼難啦，就是有很多種不同的方式可以達到居中的目的，這取決於不同的情景，很難說用哪一種方式去實現居中。
所以就讓我們做一個決策樹，希望能使這個問題簡單一點吧~
讓一個父元素為塊級元素的行內元素水平居中，可以：
CSS:
1
2
3
.center-children {
text-align: center;
}
單個塊級元素？你可以設置塊級元素的 margin-left 和 margin-right 為 auto 來使它水平居中（這個塊級元素是被設置了一個 width 屬性了，否則它會佔滿寬度，這時候已經不需要居中了），有一種速記的寫法：
CSS:
1
2
3
.center-me {
margin: 0 auto;
}
多個塊級元素？如果有兩個或者更多的塊級元素需要在被一行裡水平居中，那麼你最好設置他們不同的display 屬性來達到效果了。這裡有兩個例子：一個是設置為 inline-block， 一個是設置為 flexbox 。
HTML:
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
CSS:
1
2
3
4
5
6
7
8
9
10
11
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
除非你是想讓多個塊級元素堆積在彼此的頂部（一列堆積啦），那麼 margin: auto 還是依然適用的：
CSS:
1
2
3
4
5
6
7
main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
}
垂直居中在CSS裡，垂直居中是有那麼一點點麻煩了。
行內或者具有行內元素性質的元素（比如文字或者連結）？單行？有時候行內元素或者文字顯示為垂直居中，僅僅是因為它們的上下內邊距相等：
CSS:
1
2
3
4
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果 padding 出於某些原因不能用，並且你要使一些不換行的文字居中，這裡有一個技巧，就是設置文字的 line-height 和 height 的值相等。
CSS:
1
2
3
4
5
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行？上邊距和下邊距相等也能讓多行文字達到垂直居中的效果，但是如果這種方法不奏效的話，可能需要設置文字所在的元素為一個 table cell，不管它直接是 table 還是你用CSS使這個元素表現的像一個 table cell，vertical-align 屬性可以處理這種情況，它與我們通常所做的在行上處理元素對齊的方式不同：
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
}
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
如果沒法用類table方式，可能你需要用 flexbox ？單個的 flex 子元素可以非常簡單的被一個 flex 父元素垂直居中：
CSS:
1
2
3
4
5
6
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
請記住這個方法僅僅適用於父容器具有一個固定的額高度（px，%，等等），這也是為什麼容器有一個高度。
如果上面的方法都不能用，你可以試試 」虛元素「 技術：其中一個完整高度的偽元素放置在容器內，並與文本垂直對齊。
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}
塊級元素？知道元素的高度？不知道元素的高度是比較常見的，有很多原因：如果寬度改變，文本回流會改變高度；文字樣式改變會改變高度；文字數量改變會改變高度；一個固定比例的元素，比如圖片，當重置尺寸的時候也會改變高度，等等。
但如果你知道高度，你可以這樣垂直居中元素：
CSS:
1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
元素高度未知？可以通過 transform 來達到目的：
CSS:
1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
能用 flexbox 嗎？毫無疑問，用 flexbox 簡單太多了：
CSS:
1
2
3
4
5
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
垂直水平居中你可以通過不同的方式結合上面的技術來得到一個完美的居中水平垂直居中元素。但是我發現，這些方法通常都屬於以下三種陣營：
元素有固定的寬和高？用負的 margin 值使其等於寬度和高度的一半，當你設置了它的絕對位置為 50% 之後，就會得到一個很棒的跨瀏覽器支持的居中：
CSS;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
元素的寬和高未知？如果你不知道元素的高度和寬度，你可以用 transform 屬性，用 translate 設置 -50%（它以元素當前的寬和高為基礎）來居中：
CSS：
1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
能用 flexbox 嗎？為了讓元素在 flexbox 兩個方向都居中，你需要兩個居中屬性：
CSS:
1
2
3
4
5
.parent {
display: flex;
justify-content: center;
align-items: center;
}
結論你完全可以用CSS來居中元素，
長按掃描二維碼加入本群學習|交流