The principle of horizontal centering pop-up frame with vertical-align

<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;
}

mainly don"t know where the baseline of this container is
this is demo
@ CRIMX

Sep.29,2021

it turns out that the question can still circle people.

you replace the child of .kids with a lowercase x , and the bottom of this x is the location of the baseline.

Menu