CSS 中的垂直水平居中

水平居中

inline 或 inline-* 元素

對於內聯的子元素水平居中，咱們只須要設置父級塊級元素的text-align: center;就行。

塊級元素

對於塊級元素的居中，咱們能夠設置這個塊級元素的margin-left和margin-right爲auto就行。如margin: 0 auto;。

垂直居中

inline 或 inline-* 元素

咱們能夠設置行內元素的padding-top和padding-bottom爲一個具體的值，如padding: 30px 0;。

或者咱們設置父級元素的height等於line-height。如

.box {
  height: 100px;
  line-height: 100px;
}
複製代碼

塊級元素

若是知道要垂直居中的元素的高度，那麼咱們就能夠使用absolute定位來垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}
複製代碼

咱們將居中元素top設置爲50%，而後讓它的上邊距爲它的負的高度通常。

若是不知道元素的高度，咱們能夠使用transform: translateY(-50%);來垂直居中

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

垂直水平居中

和上面同樣若是知道元素的寬高能夠使用margin來垂直居中。

.parent {
  position: relative;
}

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

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

  margin: -70px 0 0 -170px;
}
複製代碼

若是不知道元素的寬高能夠使用translate來垂直居中。

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

咱們還能夠使用margin: auto來垂直居中。

div {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: red;
}
複製代碼

由於定位元素，其對立定位方向屬性同時有具體定位數值的時候（如同時設置left和right），就會擁有流體特性。

並且具備流體特性絕對定位元素的margin:auto的填充規則和普通流體元素如出一轍。因此咱們就能夠用來水平或垂直或垂直水平居中元素。

Flex 和 Grid

使用flex和grid能夠很是輕鬆的讓元素垂直水平居中。