在CSS中如何居中這事兒是CSS為人所抱怨的典型代表之一。“為毛它這么難？%>_<%”，開發者們抱怨道。我認為這個問題的關鍵不在于處理CSS居中難做，而在于根據不同的場景，有太多不同的方法來解決居中問題，以至于你無從下手，不知道哪種方法能滿足你的需要。
因此，我們來做一個決策樹，讓這事兒變得更簡單一些。
首先，我的需求居中
水平居中
1.是inline或者inline-*元素，比如文本或者鏈接？
對于父元素是塊級元素的內聯元素來說，你只需要這么做
```
.center-children{
text-align:center
}
```
demohttp://codepen.io/chriscoyier/pen/HulzB
2.一個塊級元素？
你只需要給這個塊級元素指定margin-left和margin-right的值為auto(當然，這個塊級元素本身應該被顯示的指定width，否則這個塊級元素的將占據整行的寬度，也就沒有居中的需要了)
.center-me{
margin:0 auto
}
demohttp://codepen.io/chriscoyier/pen/eszon
不管它或者它的父級寬度是多少，這樣的設置，你都能得到想要的結果。 另外：請注意，不要使用float把一個元素居中。雖然，這兒有個小技巧（戳我）。。。
3.多個塊級元素？
如果你想讓兩個或者兩個以上的塊級元素在一行上面水平居中，那么最好的辦法是改變他們display的類型。這兒給兩個例子，一個使用inline-block，另一個使用flex。
demohttp://codepen.io/chriscoyier/pen/ebing
當然，如果你的意思是讓多個塊級元素堆積疊加顯示在一條豎列上，那么設置左右外邊距的值為auto這一方法依然有效。
demohttp://codepen.io/chriscoyier/pen/haCGt
垂直居中
垂直居中在CSS中有一點小麻煩
1.是inline或者inline-*元素，比如文本或者鏈接？
1.1 單行？
有時候，只要內聯或者文本元素具備相同的上下內邊距，它們便能夠垂直居中顯示。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
demohttp://codepen.io/chriscoyier/pen/ldcwq
然而，當因為某些原因，設置padding成為一個不可選選項，而你又需要居中一些不需要換行的文本時，將line-height和height設為相同的大小的值是一個不錯的選擇。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
demohttp://codepen.io/chriscoyier/pen/LxHmK
1.2 多行？
將上下內邊距設置為相同大小從而使得單行文本垂直居中，這一方法對多行文本同樣有效。但是，如果在某些情況這一方法失效了怎么辦？也許，可以通過使用表格元素或者使用CSS，將這些文本元素顯示在一個表格單元格內（table cell）。在這種情況下，使用vertical-algin屬性處理居中與它通常在一行中處理元素的居中有所不同。（查看更多關于vertical-algin的知識點，看這兒https://css-tricks.com/what-is-vertical-align/）
demohttp://codepen.io/chriscoyier/pen/ekoFx
除此之外，你還可以使用flexbox，單個flex-child元素能夠很方便的被設置為垂直居中，相對于它的父級元素。
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
demohttp://codepen.io/chriscoyier/pen/uHygv
請記住，只有當父容器具有固定高度（px, %, etc），當前容器才具有高度。兩者是相互關聯的。
如果上面方法都不適用，你還可以使用“幽靈元素”這一方法。即將一個具有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;
}
demohttp://codepen.io/chriscoyier/pen/ofwgD
2.是一個塊級元素？
2.1 知道元素高度
在網頁布局中，不知道元素的具體高度（即高度非固定值）是很常見的，原因很多。比如，如果寬度變化，文本流需要改變它的高度以顯示文本；文本樣式變化；文字數量變化；具有固定寬高比元素調整大小變化，比如圖片等等，都能引起高度變化。
但是，如果你知道高度，你可以這么來垂直居中：
.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; */
}
demohttp://codepen.io/chriscoyier/pen/HiydJ
2.2 不知道元素高度
在不知道元素高度的情況，依然可以做到垂直居中，即通過下移其父級高度的一半，再向上移動其自身高度的一半。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
demohttp://codepen.io/chriscoyier/pen/lpema
3.使用flexbox
不要驚訝，這種情況下使用flexbox會很方便
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
demohttp://codepen.io/chriscoyier/pen/FqDyi
垂直居中 && 水平居中
你可以將上面的提到的方法以任意方式組合起來，從而得到完美的居中元素。但是，我發現，通常主要有以下三種方式。
1.元素具有固定的寬度和高度？
使用負外邊距，將其值設為寬度和高度的一半。這樣，在你將元素在絕對定位并且設置50%和50%的上/左偏移后，元素位置將居中。這一方法是跨瀏覽器支持的。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
demohttp://codepen.io/chriscoyier/pen/JGofm
2.元素寬度和高度未知？
如果你不知道元素的寬度或者高度，你可以使用transform屬性，即translate(-50%, -50%)，在橫向、縱向上都偏移自身高度的一半以居中。這一偏移是基于瀏覽器計算后得到的元素自身的寬度和高度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
demohttp://codepen.io/chriscoyier/pen/lgFiq
3.使用flexbox？
要在flexbox中是的兩個方向上都居中，你需要使用兩個居中屬性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
demohttp://codepen.io/chriscoyier/pen/msItD
結果
好了，現在你可以用CSS中得到想要的居中結果了！
PS：初次翻譯，如有問題，請原諒批評指正。如果您發現文章那兒翻譯錯誤或不妥，請留言指出！
PS2：簡書插入代碼塊沒搞會，o(╯□╰)o，代碼和代碼塊的問題下次一塊兒來調。
