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

Question

我正在尝试将两个元素绝对居中在页面中间，其中一个在另一个后面。意图是创建一个完全响应式的页面，在页面中央有一个带有脉冲效果的圆形。以下是链接到示例的fiddle网站: http://jsfiddle.net/Fy8vD/2003/

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-index（似乎没有什么作用）和绝对定位（需要硬编码像素值，而我想避免这样做）。

有没有一种优雅的方式使用 flexbox 来实现这个效果？

期望的效果：

这个例子已经很接近了，但如果可能的话，我想避免使用像素值来定义 :after 元素。

- js123

Answer 1

我不确定这是否足够，但你可以简单地在你的 :after 里添加内容。

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

fiddle: http://jsfiddle.net/ccyd6xh1/

更新：那只是一个快速的草稿，不太响应。如果您想要让效果真正地跟随您的球体和其大小，请在球体元素而不是其容器上添加:after，并使用％宽度和高度（这里的发光效果增长到球体大小的130％）：

http://jsfiddle.net/tjoo739y/

- floribon

---

哇，太棒了 - 我不知道你可以通过将所有方向初始化为0来居中绝对元素。感谢你的帮助！ - js123

np，如果您想要更强大的功能，请检查我的更新，否则该效果仅在球体位于屏幕中心时起作用。 - floribon

Answer 2

这可以很容易地通过使用“position: absolute”来创建，它会将元素/伪元素从文档的正常流中移除，因此它们会忽略彼此。您可以使用弹性单位而不需要使用“px”。这不需要使用flex属性来实现。

• 给“sphere”元素设置高度/宽度并居中。圆形符合此宽度/高度和位置。
• 使用伪元素来创建黑色圆形是让其重叠白色脉动圆形最简单的方法。两个圆形现在是兄弟元素，第二个兄弟自然会重叠。
• “sphere”的伪元素子元素被拉伸以适应父元素的高度和宽度，并将“top” / “left” / “bottom” / “right”属性设置为“0”。
• 保持响应式的一种方法是使用视口宽度单位来设置宽度和高度。这将保持高度/宽度为1：1。

示例

body {
  background: lightblue;
}
.sphere {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  height: 10vw;
  width: 10vw;
}
.sphere:before,
.sphere:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.sphere:before {
  background: #FFF;
  animation: pulsate 2.5s ease-out infinite;
}
.sphere:after {
  background: black;
}
@keyframes pulsate {
  0%, 100% {
    opacity: 0;
  }
  0% {
    transform: scale(0.1, 0.1);
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.5, 1.5);
  }
}

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

- misterManSam