使用CSS flexbox重叠两个居中的元素

Question

我试图将两个元素放在页面中间,一个在另一个后面.目的是让一个页面完全响应中间的圆圈,后面有一个脉冲效果.

这是下面的小提琴:

html,
body {
  height: 100%;
  width: 100%;
}
body {
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sphere {
  display: flex;
  background: black;
  border-radius: 300px;
  height: 100px;
  width: 100px;
}
.container:after {
  display: flex;
  background: #FFF;
  border-radius: 300px;
  height: 130px;
  width: 130px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0;
  content: "";
  z-index: -1;
  margin: auto;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

<div class="container">
  <div class="sphere"></div>
</div>

方法:

我目前正在使用flexbox将容器div放在一个圆圈里面,并:after在容器上放一个标签来创建脉冲.我尝试过使用z-indexing(似乎没有做任何事情)和绝对定位(需要硬编码的px值,我想远离它).

使用flexbox有没有一种优雅的方法来实现这一目标？

期望的效果:

这很接近,但:after如果可能的话,我想放弃使用元素的px值.

Answer 1

不确定这是否可以，但你可以简单地添加到你的 :after

position: absolute;
top   : 0;
left  : 0;
bottom: 0;
right : 0;

小提琴： http: //jsfiddle.net/ccyd6xh1/

更新是一个快速草稿，并且不是绝对响应的。如果您希望效果真正遵循您的球体及其大小，您应该:after在球体元素而不是其容器上添加 ，并使用 % 宽度和高度（此处发光会增长到130%球体大小）：

http://jsfiddle.net/tjoo739y/