HTML-How to use css on the mobile terminal to center the pop-up window with percentage layout horizontally and vertically_html/css_WEB-ITnose

On the PC side, center a pop-up window horizontally and vertically. It is easy to calculate when you know the width and height of the pop-up window. You only need to use the following css:

#date{    width: 300px;    height: 300px;    position: absolute;    top: 50%;    left: 50%;    margin-left: -150px;    margin-top: -150px;}

But on the mobile side, if you write a percentage layout, the height is difficult to determine, so it will be difficult to center the pop-up window. I encountered this problem today, I searched on Baidu, and saw this friend’s information, (http ://www.shejidaren.com/centering-percentage-widhtheight-layout.html), this friend’s css code is as follows:

.center{    width:50%;    height:30%;    position: absolute;    top: 50%;    left: 50%;    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}

After trying it, you can get the desired result The desired effect, but if we remove height: 30% when the height is uncertain, and do not set the value of height, we will find that the pop-up window will be vertically centered according to its own content. The main css code is as follows:

.center{    width:50%;    position: absolute;    top: 50%;    left: 50%;    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);}

The effect is as follows (the pop-up window is the gray background area):

In this way, you can get what you want, level and vertically centered pop-up window effects. You can try it. Also, thank you to this friend for solving my problem~~