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 的位置了。