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