CSS居中徹底指南

原載於CSS-Trick，本文着重提取文中的方法，不徹底翻譯。若有須要，直接原文查看。

人們常常抱怨在CSS中居中元素的問題，其實這個問題其實並不複雜，只是由於方法衆多，須要根據狀況從衆多方法中選取一個出來。接下來，咱們作一個‘決定樹’來幫咱們把問題變的簡單一點。首先你須要居中：

• 水平

  • 須要居中 inline 或者 inline-* 元素（如文字或者連接）？

  • 須要居中 block 類的元素？

  • 須要居中多個 block 元素？

• 垂直

  • 須要居中 inline 或者 inline-* 元素（如文字或者連接）？

  • 須要居中 block 類的元素？

• 既水平又垂直

  • 固定寬高

  • 不固定寬高

  • 使用 flexbox

水平居中

水平居中 inline 或者 inline-* 元素

你能夠輕鬆的在一個 block 元素中水平居中一個 inline 元素，如下代碼對 inline，inline-block，inline-table 和 inline-flex 等有效

.parent {
  text-align: center;
}

水平居中 block 類的元素

在 block 元素被設定固定寬度的狀況下，能夠使用設置元素 margin-left 和 margin-right 的值爲 auto 的方法實現水平居中。

.child {
  width: 400px;
  margin: 0 auto;
}

水平居中多個 block 類的元素

經過 inline-block實現

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

經過 flexbox 實現

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

垂直居中

垂直居中 inline 或者 inline-* 元素

單行

inline/text 元素能夠簡單的用設置相同的上下 padding 值達到垂直居中的目的。

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}

若是由於某種緣由不能使用 padding 的方法，你還能夠設置 line-height 等於 height來達到目的。

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

多行

相同的上下 padding 也能夠適用於此種狀況，若是不能生效，你能夠嘗試將該元素的父元素的 dispaly 設置爲 table ，同時該元素的 dispaly 設置爲 table-cell，而後設置 vertical-align。

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

若是上述方法不能使用，你能夠嘗試使用 flexbox,一個單獨的 flexbox 子元素能夠輕易的在其父元素中居中。謹記，這種方法須要父元素有固定的高度。

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

若是上述兩種方式均不能使用，你能夠使用「幽靈元素」技術，這種方法採用僞元素 ::before 撐開高度 ，文字垂直居中。

.parent {
  position: relative;
}
.parent::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

垂直居中 block 類的元素

已知元素高度

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

未知元素高度

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

使用 flexbox

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

既水平又垂直

固定寬高

.parent {
  position: relative;
}

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

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

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

不固定寬高

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

使用 flexbox

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