Centering multiple overlapping divs in flexbox

Question

I'm trying to center multiple overlapping divs inside a container div horizontally and vertically. They all have different sizes and should be displayed in the middle of the screen (no matter the size of the window) above each other.

I tried to do it with margins per child div, so that "child-width/height" + "child-margin" * 2 = 100%, but somehow it only centers the children in some window sizes and resizing the window ruins it.

So my next approach was to use the flexbox properties on the container with:

  display: flex;
  justify-content: center;
  align-items: center;

but that somehow just centers the first child-div perfectly but none of the others.

.frame {
  position: absolute;
  border: 3px solid black;
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgb(130, 130, 130);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid green;
}

<div id="container" class="container">
  <div class="frame" style="width: 90%; height: 90%; background-color: rgb(112, 111, 111); z-index: -1;"></div>
  <div class="frame" style="width: 80%; height: 80%; background-color: rgb(112, 111, 111); z-index: 0;"></div>
  <div class="frame" style="width: 70%; height: 70%; background-color: rgb(85, 84, 84); z-index: 1;"></div>
  <div class="frame" style="width: 60%; height: 60%; background-color: rgb(59, 59, 59); z-index: 2;"></div>
  <div class="frame" style="width: 50%; height: 50%; background-color: rgb(24, 23, 23); z-index: 3;"></div>
</div>

Your code works. Just add `body { height: 100vh; }` to your css. — Adam, Mar 02 '23 at 10:25
Overlapping divs are a pain in grid as the child elements are aligned to the grid tracks. Grid is not the way to go imho. — Adam, Mar 02 '23 at 10:28
use flex-direction column on ,container, and a class and id should not be same , so change it — Junaid Shaikh, Mar 02 '23 at 10:32
It's [perfectly acceptable](https://stackoverflow.com/a/3253783/12571484) to have the same name for class and id — Adam, Mar 02 '23 at 10:46

score 0 · Answer 1 · answered Mar 02 '23 at 13:31

Use CSS grid instead:

.frame {
  grid-area: 1/1; /* all the frames on the same area */
  border: 3px solid black;
  box-sizing: border-box;
}

.container {
  height: 100vh; /* full screen height*/
  display: grid;
  place-items: center; /* center everything */
  background-color: rgb(130, 130, 130);
  border: 3px solid green;
  box-sizing: border-box;
}

body {
 margin: 0;
}

<div id="container" class="container">
  <div class="frame" style="width: 90%; height: 90%; background-color: rgb(112, 111, 111); z-index: -1;"></div>
  <div class="frame" style="width: 80%; height: 80%; background-color: rgb(112, 111, 111); z-index: 0;"></div>
  <div class="frame" style="width: 70%; height: 70%; background-color: rgb(85, 84, 84); z-index: 1;"></div>
  <div class="frame" style="width: 60%; height: 60%; background-color: rgb(59, 59, 59); z-index: 2;"></div>
  <div class="frame" style="width: 50%; height: 50%; background-color: rgb(24, 23, 23); z-index: 3;"></div>
</div>

Centering multiple overlapping divs in flexbox

1 Answers1