[譯]CSS 居中（Center）方法大合集

原文出處：Centering in CSS: A Complete Guide

本文只給出了不一樣條件下的實現方式，未對原理作探討。
PS：原來要顯示 jsfiddle 和 CodePen 之類網站的代碼預覽，只需將其以 Markdown 語法來插入連接便可。

---

水平居中

行內元素

對於行內元素（inline）或複合行內元素（inline-*），直接爲其父元素設置文本居中便可。

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

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

該方法適用於 inline、inline-block、inline-table、inline-flex 之類的元素。

塊級元素

對於塊級元素，若是給定了寬度，直接設置左右邊距爲 auto 便可。
注意：對於未指定寬度的元素，默認會佔滿容許的最大寬度，這時設置居中是無效的。

.center-me {
  margin: 0 auto;
}

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

無論元素或者父元素的寬度如何，只要指定了寬度，該方法就有效。

可是，對於設置了浮動（float）的元素就不行了，這裏有一個取巧的辦法能夠實現浮動元素居中。

多個塊級元素

對於多個塊級元素須要總體居中的狀況，還可細分爲如下三類：

並排顯示，高度無要求

若是不要求並排的多個塊級元素有一樣的高度，那麼可爲這些塊級元素的父元素設置 display: inline-block 屬性，以實現所需效果。

<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>

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

http://codepen.io/chriscoyier/pen/ebing

並排顯示，要求相同高度

若是要求多個塊級元素並排居中且高度相同，則要爲其父元素設置 display: flex 屬性。

<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>

.flex-center {
  display: flex;
  justify-content: center;
}

成一列顯示

若是隻是須要讓多個塊級元素總體水平居中，而且按默認的方式縱向排列，那直接設置左右邊距爲 auto 便可。

http://codepen.io/chriscoyier/pen/haCGt

---

垂直居中

要實現元素的垂直居中就須要一些小技巧了。

行內元素

單行內容

爲行內元素/文本元素設置相等的上下內邊距便可實現單行元素的垂直居中。

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

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

若是出於種種緣由不能用上面的設置上下內邊距的方式，那麼能夠設置行高與元素的高度相同，這樣也能實現垂直居中的效果，可是使用這種方法要保證文本不會換行。

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

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

多行內容

對多行文本設置相等的上下內邊距也是能夠實現垂直居中的，可是有時候會由於文本在表格的單元格中，或者文本所屬的元素經過 CSS 設置爲表格單元格的表現方式，而沒法實現垂直居中的效果。在這種狀況下，能夠用 vertical-align 屬性來實現垂直居中。

http://codepen.io/chriscoyier/pen/ekoFx

上面的方式不可行的話，還能夠使用 flexbox，flex 只有一個子元素的話，要實現垂直居中仍是很簡單的。

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

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

對於 flexbox 方法，原文中說到父元素有指定高度以後，這種方法纔有意義，可是經過測試代碼發現，父元素未指定高度也是能夠垂直居中的。
Remember that it's only really relevant if the parent container has a fixed height (px, %, etc), which is why the container here has a height.

除此以外，還能夠使用 ghost element，這種方法是將一個完整高度的僞類放在容器中，讓文本與這個僞類縱向居中對齊。

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

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

塊級元素

元素高度已知

在網頁佈局中，元素高度不肯定的狀況很廣泛：好比元素寬度改變，文本重排以後元素高度就會改變。文本的樣式不一樣，元素高度也會不一樣。文本的字數不一樣，元素高度也會不一樣。具備固定高寬比的元素，好比圖片，當尺寸改變時，其高度也會變化，等等狀況。

可是若是元素高度已知，能夠用下面的方法來實現垂直居中：

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

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

元素高度未知

該方法就是先將元素相對於其原始位置向下移動父元素高度的一半距離，再將該元素相對其自己的高度向上移動一半，這樣就能實現垂直居中的效果了。

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

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

簡單粗暴的 flexbox

用 flexbox 的話，實現起來就簡單多了。

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

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

---

水平和垂直均居中

簡單地把上面提到的實現水平居中和垂直居中的方法結合起來天然是能夠的，可是這個需求也能夠分爲如下三類來實現：

元素寬度及高度已知

將元素相對於其父元素的寬度/高度值向右並向下移動一半的距離，這時元素左上角的頂點恰好位於父元素的中心。而後再經過設置負邊距值的方法，將元素相對於其自身的寬度/高度值向左並向上移動一半的距離，就可實現水平垂直均居中的效果了。而且這種方法的瀏覽器兼容性是很好的。

.parent {
  position: relative;
}

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

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

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

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

元素的寬度或高度未知

若是元素的寬度或者高度未知，則在將元素相對於父元素的寬高往向右並向下移動一半距離後，再用 transform 屬性來將其向左並向上移動自身寬度及高度值通常的距離便可。

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

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

flexbox 大法

要經過 flexbox 來實現水平垂直均居中，就要使用兩個居中屬性來實現：

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

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

PS: 剛發現還能夠經過下面的方式實現子元素水平及垂直均居中：

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

.child {
    // 不加這一條的話，子元素的高度將撐滿父元素。加了這一條，才能讓子元素以正常的高度顯示，而且在垂直方向上居中。
    margin: auto 0;
}

---

總結

信 CSS，得永生。