All the Ways to Center a Div

#css #html #webdev

Centering a div is something we need to do all the time as web developers, and yet it still can be a challenge. There are many approaches you can take to accomplish it. Below I'll explore all the ways to center one div inside another.

All of the examples will be using the following HTML:

<div class="outer-div">
  <div class="inner-div"></div>
</div>

Each example has these shared base styles:

.outer-div {
  background-color: red;
  width: 150px;
  height: 150px;
}

.inner-div {
  background-color: blue;
  width: 50px;
  height: 50px;
}

There is a 150x150 red outer div, and a 50x50 blue inner div. The goal is to find all the ways to center the blue div vertically and horizontally inside the red div and get this end result:

1. Flexbox

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-div {
  display: flex;
  justify-content: center;
}

.inner-div {
  align-self: center;
}

2. Absolute Positioning

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

3. CSS Grid

.outer-div {
  display: grid;
  place-content: center;
}

.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}

.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}

Try these out yourself in CodePen!

Did I miss any? Let me know below!

Top comments (12)

Conner Ow • Mar 1 '21

I figured out a lot of these ways on my own. It's great to have a reference on how centering works. Instead of using translateX and translateY, just use translate(x, y) to minimize on code.

Also, I don't think you will need to set top, left, bottom, and right to zero in one of your examples. Just maybe set top, and left to zero and that should be enough.

Thanks for writing this useful article! I will use this sometime soon!

Facundo Corradini • Mar 1 '21 • Edited

Last time I counted, I found 13 different ways :) But most are variations or weird hacks that we don't really need anymore, so the three you posted should get us covered 99% of the time