Centering things in CSS: a drama for the ages

Source: Reddit.com

Things usually sit on the center of websites, right? And putting things front and center is the best way to attract attention, so people, logically, try to do that most of the time. So putting elements in the center should be the easiest, most optimized thing to do in web development, right?

Right?

WRONG.

There are so many ways to do it, so many options and yet, somehow, by some curse, it still doesn’t work. It’s the poster child of CSS complaining, and for good reason. Hours and hours of searching “how to center things in CSS”, “how to center a div”, “how to center a div in the middle of the page”, “how to center a text in html”, “center div horizontally and vertically” and the list can go on.

Nothing should ever be this complicated.

Maybe it’s this way because of the various and often confusing methods (some better, some worse) that are all over the internet. And maybe people need some guidance when it comes to this topic.

So here they are, the best methods to center things in CSS.

1. The basic one. This solution will work for inline, inline-block, inline-table, inline-flex element.
p { text-align: center }

2. For centering blocks
p {
margin-left: auto;
margin-right: auto;
width: 4em
}


Or

p {
margin: 0 auto;
width: 8em
}


3. When talking about text, a nice trick to keep in mind for centering is line height. This works best for single line text. Keep the line-height the same number as the height of the container. Just like this:

p {
height: 100px;
line-height: 100px;
white-space: nowrap;
}


But if it multiple lines, just use:

p {
display: inline-block;
vertical-align: middle;
}


4. Centering images is a bit trickier, so there are multiple solutions. The first one is
img {
display: block;
margin-left: auto;
margin-right: auto;
}

5. This one is also good for images
img {
max-width: 100%;
height: auto;
}

6. A bit more complicated, but still good for modals.

section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}


7. Centering also goes vertically, not only horizontally. This is where we can really see a variety of options and where the saviour called flex display comes into play.
So when centering things with flex you can use

div {
height: 10em;
display: flex;
align-items: center;
}


But! Keep in mind that you need to set up the flex direction. So use either
flex-direction:row;
For horizontal alignement OR

flex-direction:column;
For vertical alignment

8. Still on the topic of using flex, we can also use combinations like

div {
height: 10em;
display: flex;
align-items: center;
justify-content: center
}


9. Of course, position absolute can help you center things both horizontally and vertically

div {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}


10. One of the more complicated solutions is displaying the element as a table. It still works like a dream, so don’t knock it until you try it.

div {
display: table-cell;
vertical-align: middle;
}


11. You want to use the grid? Things get so much easier then. You just need a wrapper with

body, html {
height: 100%;
display: grid;
}


And then add this to your element

div {
margin: auto;
}


Did we miss any? Or do you have other solutions that are not listed?

Let’s talk!