乐趣区

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

jiezi

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

基本 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;
}
退出移动版