All the Ways to Center a Div

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

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

https://codepen.io/katherinecodes/pen/vYygVGw

Did I miss any? Let me know below!