Overlap two centered elements using CSS flexbox

Question

I'm trying to absolutely center two elements in the middle of the page, with one behind the other. The intent is to have a page that is fully responsive with a circle in the middle which has a pulse effect behind it.

Here is a fiddle of the below:

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>

Method:

I'm currently using flexbox to center a container div with a circle inside, and an :after tag on the container to create the pulse. I've tried using z-indexing (doesn't seem to do anything), and absolute positioning (which requires hard-coded px values which I'd like to stay away from).

Is there a graceful way to achieve this using flexbox?

Desired Effect:

This is close, but I'd like to move away from using px values for the :after element if possible.

Answer 1

Not sure if that'll do it, but you could simply add to your :after

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

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

Update that was a quick draft, and was not absolutely responsive. If you want the effect the really follow your sphere and its size, you should add the :after on the sphere element and not its container, and use % width and height (here the glow grows to 130% of the sphere size):

http://jsfiddle.net/tjoo739y/

Answer 2

This is easily created with position: absolute, which removes the elements / pseudo elements from the normal flow of the document so they ignore each other. You can use flexible units and don't need to use px. There is no need for the flex properties to achieve this.

• The .sphere element is given its height / width and is centered. The circles conform to this width / height and position.

• Using a pseudo-element for the black circle is the easiest way to have it overlap the white pulsating circle. Both the circles are now siblings and the second sibling will overlap naturally

• The pseudo-element children of .sphere are stretched to fit the parents height and width with the top / left / bottom / right properties set at 0.

• One way to keep this responsive is to use a viewport width unit for the width and height. This will keep the height / width 1:1.

Example

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>