CSS - can't get two divs to center within containing div

Question

I need to get divs stacked on top of each other, horizontally aligned center -- within the black box.

I have this much:

 .notification-dot-layer { margin: auto; width: 48px; height: 60px; position: relative; text-align: center; border: 1px solid black; text-align: center; } .test { content: ""; position: absolute; z-index: -10; top: 0; bottom: 0; left: 50%; border-left: 4px solid #00ff00; transform: translate(-50%); width: 0px; } .notificationbluedot { height: 48px; width: 48px; background-color: #3a3b7e; border-radius: 50%; margin: 0 auto; } .notification-dot-text { position: relative; top: 50%; transform: translateY(-50%); } 

 <div class="notification-dot-layer"> <div class="test"> <div class="notificationbluedot"> <div class="notification-dot-text"> 55 </div> </div> </div> </div> 

Run the code snippet to see the results. Unfortunately, I can't get the blue circle with the "55" on it on top of the green line, centered. When the circle with the 55 is over the green line, only the portions of the green line that would be exposed should show.

What am I missing?

I need this to work in IE11 and Chrome.

Answer 1

Use position:absolute in the circle also to make it centered, while the green is also behind. I also made the circle as a sibling to the line to remove the small gap in the left side

 .notification-dot-layer { margin: auto; width: 48px; height: 60px; position: relative; text-align: center; border: 1px solid black; text-align: center; } .test { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 4px solid #00ff00; transform: translate(-50%); } .notificationbluedot { height: 48px; width: 48px; background-color: #3a3b7e; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .notification-dot-text { position: relative; top: 50%; transform: translateY(-50%); } 

 <div class="notification-dot-layer"> <div class="test"> </div> <div class="notificationbluedot"> <div class="notification-dot-text"> 55 </div> </div> </div> 

Answer 2

add .notificationbluedot {margin-left: -25px ;top:10%;position: absolute;} on your css

 .notification-dot-layer { margin: auto; width: 48px; height: 60px; position: relative; text-align: center; border: 1px solid black; text-align: center; } .test { content: ""; position: absolute; z-index: -10; top: 0; bottom: 0; left: 50%; border-left: 4px solid #00ff00; transform: translate(-50%); width: 0; //margin: 5px auto; } .notificationbluedot { height: 48px; width: 48px; background-color: #3a3b7e; border-radius: 50%; margin-left: -25px ; top:10%; position: absolute; } .notification-dot-text { position: relative; top: 50%; // left: -50%; transform: translateY(-50%); } 

 <div class="notification-dot-layer"> <div class="test"> <div class="notificationbluedot"> <div class="notification-dot-text"> 55 </div> </div> </div> </div>