vertical-align:middle水平垂直居中(填坑版)

利用vertical-align实现水平垂直居中的方案，网上很多。
具体实现，大家可以先通过//www.greatytc.com/p/dea069fecb62了解。
我这里想讲的是网上大部分利用vertical-align进行水平垂直居中的方案，其实都不是真正的水平垂直居中。
本文只适合明白了利用vertical-align进行居中方案的前端er进行阅读，如果具体实现原理不懂的，请先看上段的链接。

话不多说，先上基本的实现方案：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      .wrapper {
          width: 25vw;
          height: 50vh;
          background-color: #0cc;
          text-align: center;
      }

      .box {
          width: 5vw;
          height: 10vh;
          background-color: #BFA;
          display: inline-block;
          vertical-align: middle;
          margin: 0 auto;
      }

      .wrapper::after {
          display: inline-block;
          vertical-align: middle;
          content: "";
          height: 100%;
          width: 0;
      }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="box"></div>
</div>
</body>
</html>

我这里是通过给需要水平垂直居中的元素的父元素添加伪元素来进行实现的，相比于直接给父元素添加一个子元素，添加伪元素的方式使代码更简洁，易于维护。
嗯，代码写到这里。就已经实现了“垂直水平居中”了，至少曾经的我也是这么认为的。然而，通过改变伪元素的位置，我惊了：

x.gif

证明其实所谓的水平垂直居中只是肉眼层面上的，严格来讲，根本没有达到水平居中。
我陷入思考中，难道是伪元素的问题？于是我换成普通元素实现也是一样出现同样问题。当我深深的陷入自闭中时，我突然想到两个inline-block元素的间隙问题:

inline-blcok块之间的不可见符号会被保留父层字体的1/3大小的空间

因此解决方案呼之欲出:将父元素的字体大小设置为0

.wrapper {
            width: 25vw;
            height: 50vh;
            background-color: #0cc;
            text-align: center;
            font-size: 0;
        }

但设置字体大小难免会增大代码量或影响样式，于是更好的解决方案是样式不变，而是改变书写结构。

<body>
<div class="wrapper"><div class="box"></div></div>
</body>

综上，水平垂直居中无瑕疵实现。

vertical-align:middle水平垂直居中(填坑版)

推荐阅读更多精彩内容