下面的demo，无论浏览器大小如何改变，滚动条是否滚动，弹出框永远水平垂直居中
<html>
<head>
<title></title>
</head>
<style type="text/css">
.wrap{
position: absolute;
top:0;
width: 100%;
height: 100%;
background-color: #CEC6C6;
opacity: 0.75;
z-index: 999;
}
.alertbox{
position: fixed; /*这是关键*/
z-index: 1000;
width: 270px;
height:163px;
padding: 20px 0;
background-color: #fff;
text-align: center;
top:50vh;
margin-top: -100px;
left: 50%;
margin-left: -135px;
border-radius: 5px;
}
.alertbox h2{
font-size: 17px;
color: #030303;
margin: 0 13px;
}
.alertbox p{
font-size: 13px;
color: #000;
margin:8px 13px 40px;
}
.alertbox .ok-button{
position: absolute;
bottom: 20px;
width: 100%;
color:#037AFF;
font-size: 17px;
height: 30px;
line-height: 40px;
border-top:1px solid #B7B7B7;
cursor: pointer;
}
</style>
<body>
<div class=‘wrap-box‘>
<div class=‘wrap‘></div>
<div class=‘alertbox‘><h2>hello</h2>
<p>hello</p>
<div class=‘ok-button‘>OK</div>
</div>
</div>
</body>
</html>
时间： 2024-10-02 13:04:33