在我水了11種水平垂直居中方法以後，我終於明白了

老生常談，水平垂直居中。爲何你們都愛水平垂直居中呢？

基本HTML

<div class="father">
  <div class="child">
  </div>
</div>

根據如上結構，經過css實現水平垂直居中。

絕對定位

利用父元素相對定位和子元素絕對定位進行水平垂直居中。根據是否知道子元素寬高，使用數值或者百分比的方式進行定位。

方法1

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

經過設置四向爲0和margin: auto實現。

方法2

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px -25px;
}

經過設置left和top使child左上角位置移動到中間，而後再移動自身寬高通常使child中心至中間。

方法3

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法4

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}

總結

這幾種方法使用了絕對定位，margin或者transform來使子元素水平垂直居中，根據是否知道具體寬高來使用margin或者transform。

彈性盒子

方法5

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}

方法6

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items:center;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
}

總結

這兩種使用了flex彈性盒子佈局來實現，隨着瀏覽器兼容性的普及，彈性盒子也越來流行了。

table-cell

方法7

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: table-cell;
  text-align:center;
  vertical-align: middle;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
}

使用了table-cell以及行內塊元素來實現

行內元素

方法8

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
  vertical-align: middle;
}
.father:after{
  content:'';
  width:0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

利用僞元素撐開高度垂直居中。

方法9

.father {
  width: 100px;
  line-height: 100px;
  background-color: grey;
  text-align: center;
}
.child {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: red;
  vertical-align: middle;
}

利用父元素line-height與inline-block子元素vertical-align垂直居中

相對定位

方法10

是否是有點疑惑爲啥一、二、3都要用absolute來定位，用relative不行嗎？

答案是能夠的。😂

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法11

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}

總結

其實要想水還很再水出方法十二、方法13等等，可是主要問題並不在這裏，我以爲你們都喜歡問垂直居中問題的主要目的，仍是想考驗你們對基礎css的瞭解，定位、佈局、元素等，好比說相對佈局和絕對佈局，好比說塊級元素和行內元素，好比說margin和padding，好比說百分比的參照者，好比說僞元素的運用，好比說transform用法等等。

最主要考察的是對這些基礎實際運用能力和理解能力，並非說面試官真的想知道你瞭解多少種垂直居中的方法，他只是想了解一下面試者css的基礎罷了。

隨手一個方法12

.father {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}
.father:before {
  content: "";
  width: 0;
  height: calc(50% - 10px);
  display: block;
  vertical-align: middle;
}