5.3.8vertical-align 弹窗的例子

5.3.8中的例子中 “但是 CSS 中默认是左上方排列对齐的，所以，伪元素和这个原本在容器上边缘的 x 中心点一起往下移动了半个容器高度，也就是此时 x 中心点就在容器的垂直中心线上”。这句话不是很理解为什么设置了middle之后就往下移动了半个容器的高度呢跟左上方排列对齐有什么关系呢希望前辈给解答下这个是我稍微修改了一下的代码疑惑点是伪元素设置了vertical-align: middle;之后怎么就下移了半个容器的高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        /* font-size: 0; */
        white-space: nowrap;
        overflow: auto;
      }
      .container:after {
        content: 'x';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
      .dialog {
        display: inline-block;
        font-size: 14px;
        text-align: left;
        white-space: normal;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="dialog">这是modalx</div>
    </div>
  </body>
</html>

zhangxinxu / cssworld

5.3.8vertical-align 弹窗的例子 #44