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.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e489a4-59d17.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e489a4-59d17.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?