【第1期】聊聊css居中那點事

前言：居中是網頁佈局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點事。

我們主要從這幾個方面來了解下居中：

• 水平居中
• 垂直居中
• 水平垂直居中

水平居中

水平居中又分爲：

• 文字水平居中
• 圖片水平居中
• 已知元素寬度的水平居中
• 未知元素寬度的水平居中

文字水平居中

實現文字的水平居中，是最爲簡單的了，加上text-align: center;即可，看以下代碼：

<p class="text-center">
  文字水平居中
</p>

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

注意：父元素必須是塊級元素，即display: block;至於什麼是塊級元素，不在本文討論的範圍

圖片水平居中

圖片水平居中跟文字一樣，也是使用text-align: center;

非圖片文本元素，已知寬度的水平居中

方法一：margin: 0 auto;

比如div元素，假設我們已經知道它的寬度是300px,這時候我們就可以這樣設置,加上margin: 0 auto;這句代碼。

<div class="div1">
  我是水平居中的div
</div>

.div1 {
  width: 300px;
  margin: 0 auto;
}

同樣是針對塊級元素纔有效果。

方法二：絕對定位+負邊距

<div class="parent3">
  <div class="child3"></div>
</div>

.parent3 {
  position: relative;
}

.child3 {
  position: absolute;
  left: 50%;
  width: 300px;
  margin-left: -150px;  // 寬度的一半
}

非圖片文本元素，未知寬度的水平居中

方法一：使用text-align: center + inline-block

我覺得比較簡單的方法就是給父元素設置text-align: center;給子元素添加display: inline-block;這樣就行了，還是來看代碼比較直接。

<div class="parent">
  <div class="child">未知元素寬度</div>
</div>

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  padding: 20px;
  background: red;
}

方法二：使用絕對定位 + transform: translate()

父元素設置相對定位position: relative;;子元素設置絕對定位position: absolute加transform。看以下例子：

<div class="parent">
  <div class="child">我是水平居中的div</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  padding: 20px;
  background: red;
}

注意：爲了更好的兼容性，transform需要加上不同瀏覽器的前綴。

方法三：使用浮動

還是來看具體的代碼：

<div class="parent2">
  <div class="child2">我是水平居中的div</div>
</div>

.parent2 {
  position: relative;
  float: left;
  left: 50%;
}

.child2 {
  position: relative;
  right: 50%;
  padding: 20px;
  background: red;
}

方法四：flex實現水平居中

<div class="parent4">
  <div class="child4">我是水平居中的div</div>
</div>

.parent4 {
  position: relative;
  display: flex;
  justify-content: center;
}

.child4 {
  padding: 20px;
  background: red;
}

注意：flex有兼容性問題，關於flex的兼容性寫法，大家可以自行百度下，也可以在caniuse查看瀏覽器的兼容情況

方法五：fit-content屬性

“fit-content”是CSS中給“width”屬性新加的一個屬性值，他配合margin可以讓我輕鬆的實現水平居中的效果。這個方法也是我第一次用到，後期有時間再來仔細研究學習下。

來看代碼：

<div class="fitContentDiv">
  我是水平居中的div
</div>

.fitContentDiv {
  width: fit-content;
  margin: 0 auto;
  height: 100px;
  background: red;
  padding: 20px;
}

必須配合margin: 0 auto;來使用來可以實現居中的效果。

注意：同樣是存在瀏覽器的兼容性問題。

垂直居中

• 文字的垂直居中
• 圖片的垂直居中
• 已知元素高度的垂直居中
• 未知元素高度的垂直居中

文字的垂直居中

方法一：height=line-height

這個比較簡單，只需要設置高度height和行高line-height相等即可。看代碼：

<p class="txt1">
  我是垂直居中的文字
</p>

.txt1 {
  height: 100px;
  line-height: 100px;
  background: red;
}

注意：這個方法有個不好的地方就是隻能是針對單行的文字，多行就不適合用。

方法二：使用padding

我們設置padding-top和padding-bottom相等就可以了，而且此方法針對多行文字也沒問題。看代碼：

<p class="txt2">
  我是垂直居中的文字
</p>

.txt2 {
  padding-top: 20px;
  padding-bottom: 20px;
  background: red;
}

注意：這種方法也是有一個明顯的缺陷，就是你不能給文本的父元素設置高度。

方法三：table+table-cell

此方法是利用表格單元格的特性，我們直接看代碼：

<div class="parent6">
  <div class="child6">我是垂直居中的文字（這裏面也可以放圖片）</div>
</div>

.parent6 {
  display: table;
  width: 300px;
  height: 300px;
  background: blue;
}

.child6 {
  display: table-cell;
  vertical-align: middle;
}

此方法對圖片同樣有效，而且文本也可以多行，是一種不錯的方法。

圖片的垂直居中

使用vertical-align: middle，直接看代碼：

<p class="img-va-center">
  <img src="https://via.placeholder.com/150" alt="">
</p>

.img-va-center {
  height: 300px;
  line-height: 300px;
  background: red;
}

.img-va-center img {
  display: inline-block;
  vertical-align: middle;
}

已知元素高度的垂直居中

方法一：絕對定位+負邊距

看代碼：

<div class="parent6">
  <div class="child6">我是垂直居中的div</div>
</div>

.parent6 {
  position: relative;
  height: 300px;
  background: red;
}

.child6 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background: gray;
}

未知元素高度的垂直居中

方法一：絕對定位+transform

直接上代碼了：

<div class="parent7">
  <div class="child7">我是垂直居中的div</div>
</div>

.parent7 {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.child7 {
  position: absolute;
  top: 50%;
  width: 50px;
  padding: 10px;
  background: gray;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

注意：同樣需要考慮transform的兼容性問題。

方法二：flex+margin

<div class="parent8">
  <div class="child8">我是垂直居中的div</div>
</div>

.parent8 {
  display: flex;
  width: 300px;
  height: 300px;
  background: blue;
}

.child8 {
  margin: auto;
  padding: 20px;
  background: gray;
}

注意：此方法要考慮flex的兼容性問題。

方法三：flex+align-items

<div class="parent9">
  <div class="child9">我是垂直居中的div</div>
</div>

.parent9 {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  background: blue;
}

.child9 {
  padding: 20px;
  background: gray;
}

注意：此方法要考慮flex的兼容性問題。

水平垂直居中

水平垂直居中就是把水平居中跟垂直居中的方法結合起來使用啦，這裏就不再舉例了。

總結

這裏雖然列舉了那麼多例子，但是方法終歸是死的，業務需求是變化多端的，具體還是要根據我們項目的業務需求來搭配使用。css很強大，要實現同一個功能，可以有很多種方法，並不只有我列舉的這些，關鍵是要找到適合業務需求的方法，如果你有更好的方法，歡迎留言討論，大家一起學習進步！