在我水了11种水平垂直居中方法之后，我终于明白了

2019-03-31

老生常谈，水平垂直居中。为什么大家都爱水平垂直居中呢？

基本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

是不是有点疑惑为啥1、2、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);
}

总结

其实要想水还很再水出方法12、方法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;
}