三种CSS⽅式实现弹出窗⼝（popupwindow）⽬录
1. 使⽤display: flex；进⾏上下居中布局
在容器⾥⾯添加以下⼏⾏css语句
display: flex;
justify-content: center;
align-items: center;
注意： 设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
height:9999px;//模仿内容很长的页⾯
}
borderbox.popup__wrapper {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:999;
display: flex;
justify-content: center;
align-items: center;
}
.popup {
box-sizing: border-box;
width:670px;
height:300px;
background: #fff;
text-align: center;
padding:70px 10px 20px 10px;
border-radius:4px;
}
.popup__title{
font-size:30px;
font-weight:600;
color: #004165;
margin-bottom:20px;
}
.popup__btnWrapper {
width:50%;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.popup__text{
font-size:20px;
margin-bottom:50px;
margin-bottom:50px;
}
button{
width:154px;
cursor: pointer;
border-radius:4px;
line-height:45px;
font-weight:600;
}
.popup__yesBtn {
color: #fff;
background-color: #007dba;
border:1px solid #006ba1;
}
</style>
</head>
<body>
<div class="popup__wrapper">
<div class="popup">
<div class="popup__title">Confirmation</div>
<div class="popup__text">Are you sure you want to do this action?</div> <div class="popup__btnWrapper">
<button class="popup__yesBtn">Yes</button>
<button class="popup__noBtn">No</button>
</div>
</div>
</div>
</body>
</html>
2. 使⽤position:absolute + margin：负值
在需要上下左右居中的元素⾥添加以下⼏⾏css语句：
绝对定位，top和left 为 50%， margin的left和top为⾃⾝宽⾼⼀半
position: absolute;
width:670px;
height:300px;
left:50%;
margin-left:-335px;// width的⼀半
top:50%;
margin-top:-150px;//height的⼀半
同理也可以⽤calc来计算
绝对定位，top和left 为 ⽗元素的⼀半减⾃⾝⼀半
position: absolute;
top:calc(50%-150px);
left:calc(50%-335px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
height:9999px;//模仿内容很长的页⾯
}
.popup__wrapper {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:999;
}
.
popup {
box-sizing: border-box;
position: absolute;
width:670px;
height:300px;
background: #fff;
left:50%;
margin-left:-335px;
top:50%;
margin-top:-150px;
text-align: center;
padding:70px 10px 20px 10px;
border-radius:4px;
}
.popup__title{
font-size:30px;
font-weight:600;
color: #004165;
margin-bottom:20px;
}
.popup__btnWrapper {
width:50%;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.popup__text{
font-size:20px;
margin-bottom:50px;
}
button{
width:154px;
cursor: pointer;
border-radius:4px;
line-height:45px;
font-weight:600;
}
.popup__yesBtn {
color: #fff;
background-color: #007dba;
border:1px solid #006ba1;
}
</style>
</head>
<body>
<div class="popup__wrapper">
<div class="popup">
<div class="popup__title">Confirmation</div>
<div class="popup__text">Are you sure you want to do this action?</div> <div class="popup__btnWrapper">
<button class="popup__yesBtn">Yes</button>
<button class="popup__noBtn">No</button>
</div>
</div>
</div>
</body>
</html>
3. 使⽤position:absolute + transform: translate(-50%, -50%);
在需要上下左右居中的元素⾥添加以下⼏⾏css语句：
同⽅法⼆的原理⼀样，在absolute以后，往x, y轴⽅向移动width, height的⼀半
position: absolute;
width:670px;
height:300px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
height:9999px;//模仿内容很长的页⾯
}
.popup__wrapper {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:999;
}
.popup {
box-sizing: border-box;
position: absolute;
width:670px;
height:300px;
background: #fff;
left:50%;
top:50%;
transform:translate(-50%,-50%);
text-align: center;
padding:70px 10px 20px 10px;
border-radius:4px;
}
.popup__title{
font-size:30px;
font-weight:600;
color: #004165;
margin-bottom:20px;
}
.popup__btnWrapper {
width:50%;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.popup__text{
font-size:20px;
margin-bottom:50px;
}
button{
button{
width:154px;
cursor: pointer;
border-radius:4px;
line-height:45px;
font-weight:600;
}
.popup__yesBtn {
color: #fff;
background-color: #007dba;
border:1px solid #006ba1;
}
</style>
</head>
<body>
<div class="popup__wrapper">
<div class="popup">
<div class="popup__title">Confirmation</div>
<div class="popup__text">Are you sure you want to do this action?</div>
<div class="popup__btnWrapper">
<button class="popup__yesBtn">Yes</button>
<button class="popup__noBtn">No</button>
</div>
</div>
</div>
</body>
</html>
同样以上三种⽅法也适⽤于你想把⼀个元素始终上下左右居中的情况。举⼀反三嘛。个⼈推荐⽅法⼀， 三。
以上的代码都可以创建⼀个html⽂件，直接查看效果。
今天在审核同事代码的时候他在实现弹出窗⼝，成⽚的position:absolute； fix。很混乱。所以我想把我平时⽤的实现⽅法写出来。希望有⼀天能帮助到需要的⼈。
如果有任何错误或者还有可以改进的地⽅，欢迎评论指导。在此感谢。