使用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>