CSS中如何完美做到居中，一直是令前端工程師頭疼的問題。最近讀到CSS-TRICKS中的一篇帖子，將居中問題的解決方案策略化。感覺收獲很大，翻譯過來供大家交流學習。
當我們書寫CSS時，讓元素居中，是抱怨的爆發點之一：為什么會這么難？
我認為問題的關鍵，不在于怎么做，而在于我們如何從諸多居中方法中選擇出適應當前情景的。
所以接下來，讓我們一起創建一顆決策樹，希望可以讓居中變得簡單。
水平居中
行內元素
我們可以通過對其父級塊元素做如下處理來使行內元素居中。適用于inline,inline-block,inline-table,inline-flex等。
.center-children{
text-align: center;
}
示例：傳送門
塊級元素
我們可以通過將一個塊級元素的margin-left和margin-right同時設置為auto來使其居中。（注意：此時元素必須定義有width，否則將填滿寬度，談不上水平居中。）通常由以下簡寫來定義：
.center-me {
margin: 0 auto;
}
示例: 傳送門
多個塊級元素
當同一行中有兩個或以上塊級元素需要居中時，我們不得不通過改變display的類型來實現。下面的例子分別將display設置為inline-block以及flexbox的例子。
示例: 傳送門
當你指的是多個位于同一列上的塊級元素時，將margin設為auto的技術依舊生效。
示例: 傳送門
垂直居中
在CSS中做到垂直居中，我們需要稍微狡猾一點。
行內元素
單行
有時行內元素或文本能夠做到垂直居中，僅僅是因為元素上、下的padding相等。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
示例: 傳送門
在某些情況當padding不適用，并且文字不會換行時，有一個技巧：當line-height與height相等時，文字垂直居中。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
示例: 傳送門
多行
上下padding相等依舊可以解決這個問題。但當此方法不生效時，可能是元素或文本處于table cell中，要么是html語義中的table，要么是CSS中的設置。這種情況下，我們使用vertical-align來完成垂直居中。注意：此為特殊用法，vertical-align平時用來處理一行中的元素如何排列。
示例: 傳送門
如果類似table的那些無效時，也許我們應該嘗試下flexbox。 在flex中，一個子元素可以輕易地在父元素中居中。
flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
示例: 傳送門
記住，這種做法僅在腹肌元素高度固定時(px, %等)才有效。
如果上述兩種做法都無效，那么我們可以采用“幽靈元素”技術。在這種做法中，一個偽元素占據父元素的全部高度，然后文本在其中垂直居中。
.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; /* account for padding and border if not using box-sizing: border-box; */
}
示例: 傳送門
高度未知時
在這種情況下，我們仍然可以實現垂直居中：將元素下移父級元素的50%，再上移自身高度的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%)的位置，之后再通過將margin設置為負值。這種方法擁有廣泛的瀏覽器支持。
.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時
此時我們需要使用兩個居中屬性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
示例: 傳送門
補充額外一種兼容性很好的方法
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
結論
我們完全可以在CSS中實現居中。
