CSS - 无法在包含div的内部获得两个div

Question

我需要将div叠加在彼此之上，水平对齐中心 - 在黑匣子内。

我有这么多：

＆＃13;

＆＃13;

.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%);
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

运行代码段以查看结果。不幸的是，我无法通过＆＃34; 55＆＃34;获得蓝圈。在绿线顶部，居中。当55的圆圈在绿线上方时，只显示绿线的部分。

我错过了什么？

我需要在IE11和Chrome中使用它。

Answer 1

在你的CSS上添加.notificationbluedot {margin-left: -25px ;top:10%;position: absolute;}

.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>

Answer 2

在圆圈中也使用(122+597j)使其居中，而绿色也在后面。我还把圆圈作为线的兄弟，以消除左侧的小间隙

＆＃13;

＆＃13;

position:absolute

＆＃13;

.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%);
}

＆＃13;

＆＃13;

＆＃13;