【CSS】元素居中指南

水平居中

---

inline or inline-*元素（比如文字或者鏈接）

• 讓一個父元素爲塊級元素的行內元素水平居中
• text-align用於父元素，用於塊元素，而不是用於a

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

單個塊級元素

• 這個塊級元素是被設置了一個 width 屬性了，否則它會佔滿寬度，這時候已經不需要居中了）
• 你可以設置塊級元素的 margin-left 和 margin-right 爲 auto 來使它水平居中
• 無論父級容器和塊級元素的寬度如何變化，都不會影響塊級元素的居中效果
• float屬性是不能實現元素居中的

.center-me {
    margin: 0 auto;
}

多個塊級元素

如果有兩個或者更多的塊級元素需要在被一行裏水平居中，那麼你最好設置他們不同的 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;
}

方法二：設置爲 flexbox

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

除非你是想讓多個塊級元素堆積在彼此的頂部，那麼 margin: auto 還是依然適用的

main div {
   background: black;
   margin: 0 auto;
   color: white;
   padding: 15px;
   margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}
main div:nth-child(3) {
  width: 125px;
}

垂直居中

---

inline or inline-*元素（比如文字或者鏈接）

單行

• 有時候行內元素或者文字顯示爲垂直居中，僅僅是因爲它們的上下內邊距相等
• 這樣的情況下，文字也水平居中
  

<main>
  <a href="#0">We're</a>
  <a href="#0">Centered</a>
  <a href="#0">Bits of</a>
  <a href="#0">Text</a>
</main>

main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}

如果 padding 出於某些原因不能用，並且你要使一些不換行的文字居中，這裏有一個技巧，就是設置文字的 line-height 和 height 的值相等

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

多行

對於多行文本，同樣可以使用等值 padding-top 和 padding-bottom 的方式實現垂直居中。如果你在使用過程中發現這種方法沒見效，那麼你可以通過 CSS 爲文本設置一個類似 table-cell 的父級容器，然後使用vertical-align屬性實現垂直居中

真實table

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

table cell

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

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

如果沒法用類table方式，還可以使用 flexbox 實現垂直居中，對於父級容器爲 display: flex 的元素來說，它的每一個子元素都是垂直居中的

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

請記住這個方法僅僅適用於父容器具有一個固定的高度（px，%，等等），這也是爲什麼容器有一個高度。

如果上述方法都不起作用，那麼你就需要使用被稱爲幽靈元素（ghost element）的非常規解決方式：在垂直居中的元素上添加僞元素，設置僞元素的高等於父級容器的高，然後爲文本添加 vertical-align: middle; 樣式，即可實現垂直居中

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

元素高度未知

可以通過 transform 來達到目的：CSS:

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

能用 flexbox 嗎？

毫無疑問，用 flexbox 簡單太多了：CSS:

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

垂直水平居中

---

你可以通過不同的方式結合上面的技術來得到一個完美的居中水平垂直居中元素。但是我發現，這些方法通常都屬於以下三種陣營：

元素有固定的寬和高？

用負的 margin 值使其等於寬度和高度的一半，當你設置了它的絕對位置爲 50% 之後，就會得到一個很棒的跨瀏覽器支持的居中：CSS;

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

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

能用 flexbox 嗎？

爲了讓元素在 flexbox 兩個方向都居中，你需要兩個居中屬性：CSS:

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

參考資料

---

[1] https://www.w3cplus.com/css/centering-css-complete-guide.html
[2] https://css-tricks.com/centering-css-complete-guide/