TA貢獻1804條經(jīng)驗 獲得超3個贊
<div class="mask">
<div class="dialog"></div>
</div>
.mask {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3)
}
.dialog {
// 寬高必須要聲明，對于寬高不固定這個方法不適用
width: 200px;
height: 200px;
border-radius: 5px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
TA貢獻1810條經(jīng)驗 獲得超5個贊
如果已知盒子div的width 和 height, 可以試試
div{
position:fixed;
left:50%;
margin-left:- div的width的一半;
top:50%;
margin-top: - div的height的一半;
}
至于題主要的半透明黑色遮罩 可以使用::after
div::after{
content: " ";
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.3);
top: 0;
left: 0;
z-index: 0;
}
居中的方法還有挺多的 可以參考 《CSS制作水平垂直居中對齊》
舉報