DEV Community

loading...
Cover image for All the Ways to Center a Div

All the Ways to Center a Div

katherinecodes profile image Katherine Peterson Originally published at blog.katherinempeterson.com Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

OR

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

.inner-div {
  align-self: center;
}
Enter fullscreen mode Exit fullscreen mode

2. Absolute Positioning

.outer-div {
  position: relative;
}

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

Enter fullscreen mode Exit fullscreen mode

OR

.outer-div {
  position: relative;
}

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

3. CSS Grid

.outer-div {
  display: grid;
  place-content: center;
}
Enter fullscreen mode Exit fullscreen mode

OR

.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

OR

.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}
Enter fullscreen mode Exit fullscreen mode

Try these out yourself in CodePen!


Did I miss any? Let me know below!

Discussion (11)

pic
Editor guide
Collapse
leviathanprogramming profile image
𝐋𝐄𝑽𝐈𝑨𝐓𝐇𝐀𝐍 Programming

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!

Collapse
facundocorradini profile image
Facundo Corradini • 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

Collapse
mukhtaaraziz profile image
MukhtaarAziz

Good, thank you very much

Collapse
mrdanielschwarz profile image
Daniel Schwarz

margin: auto; also works within Flex and Grid.

Collapse
arvindsridharan profile image
arvindsridharan

This is awesome!

Collapse
spiritbro1 profile image
spiritbro1

more of this series please

Collapse
ra1nbow1 profile image
Matvey Romanov

This is an eternal problem. Thank you very much!

Collapse
rahxuls profile image
Rahul

Must know things for beginners

Collapse
baenencalin profile image
Calin Baenen

Yes, you forgot the (deprecated, but still working) <center> tag.

Collapse
pulkitsingh profile image
Pulkit Singh

There's one more way by adding margin auto and line-height 100%

Collapse
mrgrochowski profile image
mrGrochowski

From old times
parent
display: table
vertical-align: middle
text-align:center;
Child
display: inline-block