【第1期】聊聊css居中那點(diǎn)事

劉永祥發(fā)布于2019-08-30 15:55 / 2116人閱讀

摘要：前言居中是網(wǎng)頁(yè)布局中再常見不過(guò)的一種方式了，今天我們就來(lái)聊聊居中的那點(diǎn)事。我是水平居中的同樣是針對(duì)塊級(jí)元素才有效果。來(lái)看代碼我是水平居中的必須配合來(lái)使用來(lái)可以實(shí)現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問(wèn)題。

前言：居中是網(wǎng)頁(yè)布局中再常見不過(guò)的一種方式了，今天我們就來(lái)聊聊css居中的那點(diǎn)事。

我們主要從這幾個(gè)方面來(lái)了解下居中：

水平居中

垂直居中

水平垂直居中

水平居中

水平居中又分為：

文字水平居中

圖片水平居中

已知元素寬度的水平居中

未知元素寬度的水平居中

文字水平居中

實(shí)現(xiàn)文字的水平居中，是最為簡(jiǎn)單的了，加上text-align: center;即可，看以下代碼：

文字水平居中

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

注意：父元素必須是塊級(jí)元素，即display: block;至于什么是塊級(jí)元素，不在本文討論的范圍

圖片水平居中

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

非圖片文本元素，已知寬度的水平居中 方法一：margin: 0 auto;

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


  我是水平居中的div

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

同樣是針對(duì)塊級(jí)元素才有效果。

方法二：絕對(duì)定位+負(fù)邊距

.parent3 {
  position: relative;
}

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

非圖片文本元素，未知寬度的水平居中 方法一：使用text-align: center + inline-block

我覺(jué)得比較簡(jiǎn)單的方法就是給父元素設(shè)置text-align: center;給子元素添加display: inline-block;這樣就行了，還是來(lái)看代碼比較直接。


  未知元素寬度

.parent {
  text-align: center;
}

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

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

父元素設(shè)置相對(duì)定位position: relative;;子元素設(shè)置絕對(duì)定位position: absolute加transform?？匆韵吕樱?/p>


  我是水平居中的div

.parent {
  position: relative;
}

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

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

方法三：使用浮動(dòng)

還是來(lái)看具體的代碼：


  我是水平居中的div

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

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

方法四：flex實(shí)現(xiàn)水平居中


  我是水平居中的div

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

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

注意：flex有兼容性問(wèn)題，關(guān)于flex的兼容性寫法，大家可以自行百度下，也可以在caniuse查看瀏覽器的兼容情況

方法五：fit-content屬性

“fit-content”是CSS中給“width”屬性新加的一個(gè)屬性值，他配合margin可以讓我輕松的實(shí)現(xiàn)水平居中的效果。這個(gè)方法也是我第一次用到，后期有時(shí)間再來(lái)仔細(xì)研究學(xué)習(xí)下。

來(lái)看代碼：


  我是水平居中的div

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

必須配合margin: 0 auto;來(lái)使用來(lái)可以實(shí)現(xiàn)居中的效果。

注意：同樣是存在瀏覽器的兼容性問(wèn)題。

垂直居中

文字的垂直居中

圖片的垂直居中

已知元素高度的垂直居中

未知元素高度的垂直居中

文字的垂直居中 方法一：height=line-height

這個(gè)比較簡(jiǎn)單，只需要設(shè)置高度height和行高line-height相等即可?？创a：

我是垂直居中的文字

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

注意：這個(gè)方法有個(gè)不好的地方就是只能是針對(duì)單行的文字，多行就不適合用。

方法二：使用padding

我們?cè)O(shè)置padding-top和padding-bottom相等就可以了，而且此方法針對(duì)多行文字也沒(méi)問(wèn)題?？创a：

我是垂直居中的文字

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

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

方法三：table+table-cell

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


  我是垂直居中的文字（這里面也可以放圖片）

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

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

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

圖片的垂直居中

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

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

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

已知元素高度的垂直居中 方法一：絕對(duì)定位+負(fù)邊距

看代碼：


  我是垂直居中的div

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

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

未知元素高度的垂直居中 方法一：絕對(duì)定位+transform

直接上代碼了：


  我是垂直居中的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的兼容性問(wèn)題。

方法二：flex+margin


  我是垂直居中的div

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

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

注意：此方法要考慮flex的兼容性問(wèn)題。

方法三：flex+align-items


  我是垂直居中的div

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

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

注意：此方法要考慮flex的兼容性問(wèn)題。

水平垂直居中

水平垂直居中就是把水平居中跟垂直居中的方法結(jié)合起來(lái)使用啦，這里就不再舉例了。

總結(jié)

這里雖然列舉了那么多例子，但是方法終歸是死的，業(yè)務(wù)需求是變化多端的，具體還是要根據(jù)我們項(xiàng)目的業(yè)務(wù)需求來(lái)搭配使用。css很強(qiáng)大，要實(shí)現(xiàn)同一個(gè)功能，可以有很多種方法，并不只有我列舉的這些，關(guān)鍵是要找到適合業(yè)務(wù)需求的方法，如果你有更好的方法，歡迎留言討論，大家一起學(xué)習(xí)進(jìn)步！