原文：Chris Coyier // September 2, 2014
https://centering-css-complete-guide

在CSS中如何居中這事兒是CSS為人所抱怨的典型代表之一×氩海“為毛它這么難盏混？%>_<%...”，開發(fā)者們抱怨道惜论。我認(rèn)為這個(gè)問題的關(guān)鍵不在于處理CSS居中難做许赃，而在于根據(jù)不同的場(chǎng)景，有太多不同的方法來解決居中問題馆类，以至于你無從下手混聊，不知道哪種方法能滿足你的需要。

因此乾巧，我們來做一個(gè)決策樹句喜，讓這事兒變得更簡單一些。

首先沟于，我的需求居中

水平居中
1.是inline或者inline-*元素咳胃，比如文本或者鏈接？
對(duì)于父元素是塊級(jí)元素的內(nèi)聯(lián)元素來說旷太，你只需要這么做

.center-children {
  text-align:center
}

demo http://codepen.io/chriscoyier/pen/HulzB

2.一個(gè)塊級(jí)元素
你只需要給這個(gè)塊級(jí)元素指定margin-left和margin-right的值為auto(當(dāng)然展懈，這個(gè)塊級(jí)元素本身應(yīng)該被顯示的指定width，否則這個(gè)塊級(jí)元素的將占據(jù)整行的寬度供璧，也就沒有居中的需要了)

.center-me{
  margin:0 auto
}

demo http://codepen.io/chriscoyier/pen/eszon

不管它或者它的父級(jí)寬度是多少标沪，這樣的設(shè)置，你都能得到想要的結(jié)果嗜傅〗鹁洌　　
另外：請(qǐng)注意，不要使用float把一個(gè)元素居中吕嘀。雖然违寞，這兒有個(gè)小技巧（戳我）贞瞒。。军浆。

3.多個(gè)塊級(jí)元素
如果你想讓兩個(gè)或者兩個(gè)以上的塊級(jí)元素在一行上面水平居中，那么最好的辦法是改變他們display的類型挡闰。這兒給兩個(gè)例子摄悯，一個(gè)使用inline-block，另一個(gè)使用flex撒遣。
demo http://codepen.io/chriscoyier/pen/ebing

當(dāng)然义黎，如果你的意思是讓多個(gè)塊級(jí)元素堆積疊加顯示在一條豎列上火的，那么設(shè)置左右外邊距的值為auto這一方法依然有效淑倾。
demo http://codepen.io/chriscoyier/pen/haCGt

垂直居中
垂直居中在CSS中有一點(diǎn)小麻煩

1.inline或者inline-*元素，比如文本或者鏈接
1.1 單行
有時(shí)候治力，只要內(nèi)聯(lián)或者文本元素具備相同的上下內(nèi)邊距，它們便能夠垂直居中顯示瓢省。

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

demo http://codepen.io/chriscoyier/pen/ldcwq

然而馒胆，當(dāng)因?yàn)槟承┰蜃Ｓ兀O(shè)置padding成為一個(gè)不可選選項(xiàng)掌动，而你又需要居中一些不需要換行的文本時(shí)粗恢，將line-height和height設(shè)為相同的大小的值是一個(gè)不錯(cuò)的選擇族展。

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

demo http://codepen.io/chriscoyier/pen/LxHmK

1.2 多行
將上下內(nèi)邊距設(shè)置為相同大小從而使得單行文本垂直居中，這一方法對(duì)多行文本同樣有效冗茸。但是，如果在某些情況這一方法失效了怎么辦？也許芳室，可以通過使用表格元素或者使用CSS伍宦，將這些文本元素顯示在一個(gè)表格單元格內(nèi)（table cell）。在這種情況下遇骑，使用vertical-algin屬性處理居中與它通常在一行中處理元素的居中有所不同翔脱。（查看更多關(guān)于vertical-algin的知識(shí)點(diǎn)疚沐，看這兒https://css-tricks.com/what-is-vertical-align/）
demohttp://codepen.io/chriscoyier/pen/ekoFx

除此之外，你還可以使用flexbox梯嗽，單個(gè)flex-child元素能夠很方便的被設(shè)置為垂直居中灯节，相對(duì)于它的父級(jí)元素炎疆。

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

demo http://codepen.io/chriscoyier/pen/uHygv

請(qǐng)記住，只有當(dāng)父容器具有固定高度（px, %, etc），當(dāng)前容器才具有高度。兩者是相互關(guān)聯(lián)的浦徊。
如果上面方法都不適用辑畦，你還可以使用“幽靈元素”這一方法。即將一個(gè)具有100%高度的偽元素放到容器內(nèi)鸵赖，文本以此來垂直居中。

.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;
}

demo http://codepen.io/chriscoyier/pen/ofwgD

2.一個(gè)塊級(jí)元素
2.1 知道元素高度
在網(wǎng)頁布局中，不知道元素的具體高度（即高度非固定值）是很常見的轮洋，原因很多弊予。比如，如果寬度變化床未，文本流需要改變它的高度以顯示文本竭翠；文本樣式變化；文字?jǐn)?shù)量變化薇搁；具有固定寬高比元素調(diào)整大小變化斋扰，比如圖片等等，都能引起高度變化啃洋。
但是传货，如果你知道高度，你可以這么來垂直居中：

.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; */
}

demo http://codepen.io/chriscoyier/pen/HiydJ

2.2 不知道元素高度
在不知道元素高度的情況宏娄，依然可以做到垂直居中问裕，即通過下移其父級(jí)高度的一半，再向上移動(dòng)其自身高度的一半孵坚。

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

demo http://codepen.io/chriscoyier/pen/lpema

3.使用flexbox
不要驚訝粮宛，這種情況下使用flexbox會(huì)很方便

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

demo http://codepen.io/chriscoyier/pen/FqDyi

垂直居中 && 水平居中
你可以將上面的提到的方法以任意方式組合起來，從而得到完美的居中元素卖宠。但是巍杈，我發(fā)現(xiàn)，通常主要有以下三種方式扛伍。

1.元素具有固定的寬度和高度
使用負(fù)外邊距筷畦，將其值設(shè)為寬度和高度的一半。這樣刺洒，在你將元素在絕對(duì)定位并且設(shè)置50%和50%的上/左偏移后鳖宾，元素位置將居中。這一方法是跨瀏覽器支持的逆航。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

demo http://codepen.io/chriscoyier/pen/JGofm

2.元素寬度和高度未知
如果你不知道元素的寬度或者高度鼎文，你可以使用transform屬性，即translate(-50%, -50%)纸泡，在橫向漂问、縱向上都偏移自身高度的一半以居中赖瞒。這一偏移是基于瀏覽器計(jì)算后得到的元素自身的寬度和高度。

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

demo http://codepen.io/chriscoyier/pen/lgFiq

3.使用flexbox
要在flexbox中是的兩個(gè)方向上都居中蚤假，你需要使用兩個(gè)居中屬性：

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

demo http://codepen.io/chriscoyier/pen/msItD

結(jié)果
好了栏饮，現(xiàn)在你可以用CSS中得到想要的居中結(jié)果了！

PS：初次翻譯磷仰，如有問題袍嬉，請(qǐng)?jiān)徟u(píng)指正。如果您發(fā)現(xiàn)文章那兒翻譯錯(cuò)誤或不妥灶平，請(qǐng)留言指出伺通！
PS2：簡書插入代碼塊沒搞會(huì)，o(╯□╰)o逢享，代碼和代碼塊的問題下次一塊兒來調(diào)罐监。
PS3：代碼和代碼塊已修改 2015/8/19 23:29:21
PS4：等我翻譯完，才發(fā)現(xiàn)簡書上公子肥馬輕裘童鞋已經(jīng)翻譯過這篇文章了瞒爬， 地址戳這兒
PS5：舊版是富文本編輯器弄的弓柱，代碼塊不好弄，所以改到markdown編輯器后新建了一篇文章侧但，老版本戳這兒