How to center a div: 5 methods, ranked by how much they made me cry

Everybody laughs at "how do I center a div" until they are the one at 11pm with a client on WhatsApp asking why the logo is "small small shifting to the left". I have been that person. So this is the post I wish I had when I started. The code is real and it works. The tears are also real.

5. position: absolute + transform (the old faithful)

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Works everywhere, even in the browser your client's uncle is still using. But the child is taken out of the normal flow, so the parent no longer knows how tall it is. If the parent has no height, everything collapses and you are staring at nothing. The transform can also make text a bit blurry on some screens when it lands on half pixels.

Cry level: 😭😭😭😭. E don cast for me many times.

4. margin: 0 auto (horizontal only)

.child {
  width: 600px; /* or max-width */
  margin: 0 auto;
}

Only centers horizontally, and only for a block element that has a width. No width, no centering, because a block element already takes the full width and there is no free space to share. This one confused me for a whole week in 2021.

Cry level: 😭😭😭. Na small small tears.

3. text-align: center (for inline things)

.parent { text-align: center; }

Centers inline and inline-block children like text, images and buttons. Does nothing for a normal div child, and it also centers all the text inside, which the designer did not ask for. Then you add text-align: left on the child to undo it. Then you question your life.

Cry level: 😭😭.

2. Flexbox

.parent {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  min-height: 100vh;       /* the parent needs height to center vertically */
}

This is what I use most of the time. The one thing that catches everybody: justify-content follows the main axis, so if you set flex-direction: column, the two properties swap jobs. Vertical becomes justify, horizontal becomes align. Na there plenty people dey fall.

Also, if the parent has no height, vertical centering "works" but you cannot see it, because the parent is exactly as tall as the child. Give it a min-height.

Cry level: 😭. Only when I forget the column thing.

1. Grid with place-items

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Two lines. Centers both ways. place-items is shorthand for align-items plus justify-items. If you have one child to center, this is the cleanest thing in CSS. I showed my senior and he said "since when?" and I felt like Arsenal lifting a trophy.

Cry level: 0. Pure joy.

Bonus: margin auto inside flex or grid

.parent { display: flex; min-height: 300px; }
.child { margin: auto; }

Inside a flex or grid container, margin: auto eats all the free space on every side, so the child sits in the middle. Nice when you only control the child's CSS.

The real reason your div is not centered

• The parent has no height. I keep saying it because it is the answer most of the time
• You centered the wrong element. Open DevTools, hover the elements and see which box is actually wide
• Something else has a fixed width, or a margin from a CSS reset you forgot about
• The image inside has extra space below it because images are inline by default. display: block on the img fixes that

That is all. Go and center your div. If it still no gree, post the code here, not a screenshot, and we go look am together.