vertical-align实现水平居中弹框的原理

Question

<div class="container">
    <div class="dialog"></div>
</div>
.container {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
    font-size:0;
    overflow:auto;
}
.container:after {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.dialog {
    display:inline-block;
    vertical-align:middle;
}

主要是不知道这个container的baseline在哪
这个是demo
@CRIMX

Answer 1

原来问题还可以圈人的....

你把 .dialog 的孩子换成一个小写 x ，这个 x 的底部就是 baseline 的位置了。