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

Question

所以我有这个：

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

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

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

这是我当前的 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

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

演示

.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*/
}

Answer 2

有顶部和底部以及位置。您可能还想为 body 添加样式。

body {
    text-align:center;
/*the rest of your style*/
}

.addedcartbg {
    position: relative;
    top:200;
    margin-right: auto;
    margin-left: auto;
/*the rest of your style*/
}

Answer 3

您还应该添加一个 z-index

.addedcartbg {
  z-index:9999; // include this to avoid overlay of other divs.
}