【前端】水平垂直居中的幾種方式

1. flex 佈局

flex佈局也叫彈性佈局，我認爲flex box佈局是一種十分優雅的佈局方式，兼容性一般，使用起來非常簡單。

display: flex;// flex-direction默認是row
justify-content: center; //水平居中
align-items: center; //垂直居中

2. 絕對定位 + margin 負邊距

給元素設置定位absolute，父元素設置定位absolute或relative，參考絕對定位原理，絕對定位是相對最近一個設置定位屬性(非static)的父級元素的，給元素設置left: 50%, right: 50% 後，元素現在的位置如上圖所示，現在元素的位置稍微偏離正中心，容易發現距離上邊界、左邊界是元素自身高度的一半，使用負邊界可以使元素往左上角移動。

.box {
  position: relative;
}
.item {
  width: 300px;
  height: 400px;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -150px;
  margin-top: -200px;
}

3. 絕對定位 + transform

按照上面的原理，能否給寬高未知的元素居中對齊呢？可以使用transform屬性。
CSS transform屬性允許你旋轉，縮放，傾斜或平移給定元素。注意translate參數的值是相對自身的，也就是這樣才能在不知道元素具體寬高的情況下做到準確位移

.box {
  position: relative;
}
.item {
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}

4. 絕對定位 + margin: auto

這種方式有些怪異，不太好理解，暫時作爲收藏

.box {
  position: relative;
}
.item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

5. 設置line-height 爲元素高度

對於行內元素來說，垂直居中可以將line-height的值設爲元素高度。而水平居中只需要設置父元素text-align屬性爲center。
如果要居中的不是文本，對於設置了display爲inline-block的元素來說，也是可以做到的。inline-block身負行內元素與塊級元素的特性

.box {
  width: 300px;
  height: 400px;
  border: 1px red solid;
  text-align: center;
}
.item {
  height: 40px;
  display: inline;
  line-height: 400px;
  border: 1px solid green;
}

當然了，行內元素是沒法設置寬度的，如果元素需要定義寬度，那麼可以將display設爲inline-block，這樣元素就身負行內元素與塊級元素的特效了。