常用的控制元素水平垂直解决方案 - 未知宽高

[renjie-run]

在之前的文章中已经介绍过已知宽高元素居中，在这篇文章中接着介绍一下未知宽高元素的居中方案都有哪些。

前期准备 HTML

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

CSS

.father {
  background-color: skyblue
}

.child {
  background-color: blue;
  color: #fff;
}

1. flex

flex不光能够使已知宽高元素居中，也可为父元素、子元素宽高均未知提供居中解决方案，目前这种写法也比较常见了。

.father {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 伪元素

在已知元素宽高的解决方案中没有介绍过伪元素的方法，在这里也提供下吧。这里解决的是父元素大小已知，子元素宽高未知的情况。

.father {
  width: 300px;
  height: 300px;
  text-align: center;
}

.father::before {
  content: '';
  width: 0;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}

.child {
  display: inline-block;
}

这里伪元素的作用是为了改变父元素的baseline（这里详细的说法可以自行查阅相关文档），然后再结合vertical-align: middle来使子元素在垂直方向上居中。

3. 绝对定位 + transform

这种居中方案既能解决已知宽高元素的居中问题，也能解决未知元素宽高的居中问题。

.father {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. table

.father {
  display: table;
}

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

通过对子元素设置display: table-cell后，使用vertical-align: middle后能够使子元素在垂直方向上居中。