css - 在屏幕中央居中弹出 div

Question

所以我得到了这个:

<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>

我希望它在单击图像时在屏幕中间弹出。图片当前以“#”开头，因此它只是转到页面顶部。

我的问题是，当我将 addedcartbg 设置为 position:fixed 时，它完全从页面上消失了。我还需要知道如何将它在屏幕的中间垂直居中，我知道我可以将左右边距设置为自动使其水平居中，但这不适用于顶部和底部。

这是我当前的 div CSS 代码:

.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;

}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}

Answer 1

我假设这是你的灯箱类而不是像这样修改它，这应该为你完成工作

Demo

.addedcartbg {
   background-color: rgba(153,153,153,0.3);
   height: 80px;
   width: 320px;
   padding-top: 40px;
   padding-right: 30px;
   padding-left: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px; /*half of total height + half of top padding*/
   margin-left: -175px; /*half of total width + half of left padding*/
}