Question

So I’ve got this:

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

And I want it to pop up in the middle of the screen when an image is clicked. The image is currently opening “#” so it just goes to the top of the page.

My problem is, when I set the addedcartbg to position:fixed, it dissapears from the page completely. I also need to know how to centre it in the middle vertically on the screen, I know I can set left and right margins to auto to centre it horizontally, but that doesn’t work with top and bottom.

This is my current CSS code for the divs:

.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

I assume that this is your lighbox class than modify it like this, this should do the work for you

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