All the Ways to Center a Div

Featured on Hashnode

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;
}

blue div inside red div uncentered

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: blue div inside red div centered


1. Flexbox

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

OR

.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%);
}

OR

.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;
}

OR

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

OR

.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!

Vivek Tiwari's photo

Flexbox is the easiest and my goto approach. 🙌

Gourav Khunger's photo

I always tend to forget the process to center divs 🤣 Good for me! Thanks for this article Katherine Peterson

Anshu Meena's photo

thanks for this information i allways search for this topic on stackoverflow

Ganesh K S's photo

u made it easy to understand...thanks

Savio Martin's photo

I have used them all, flexbox is my favorite

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

I usually build a separate class with flexbox and reuse the same class in places I need flexbox 🙌

Suraj kumar's photo

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

it is the best way instead of position