< html >
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
.popup_box{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0, 0, 0, 0.8);z-index:10000;}
.popup_box .area{position:relative;top:50%;left:50%;width:600px;height:350px;margin-top:-175px;margin-left:-300px;border-radius:5px;background-color:-sharpfff;}
</style>
</head>< body >
<div class="popup_box">
<div class="area"></div>
</div>< / body >
< / html >
to put it simply, when .area is relatively positioned, most browsers display normally, horizontal and vertical are centered, but individual browsers will be horizontally centered, but vertically not centered. Everything is normal after changing position:relative; to position:absolute;. When testing, you did not encounter vertical non-centralization, but some users reported that it was encountered. As shown in the following figure, I do not know whether it is the parent element position:fixed;. The result is that the child element top:50%; is invalid.
