DEV Community

Cover image for 7 Ways to Escape CSS Hell
Ryland @ Stackbit for Stackbit

Posted on • Updated on

7 Ways to Escape CSS Hell

Ever have this happen? lol

Funny meme about centering with css

Yeah, me too.

Here are the 7 ways to completely center whatever you want with CSS.

1. text-align: center;

This works only on display: inline & display: inline-block elements. Note also that it must be applied to the parent element.

Centering images and text with text-align: center css

2. margin: 0 auto;

This works only on display: block elements. And the element must have a width.

You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom.

Centering elements inside a div with margin: 0 auto css

3. vertical-align: middle;

This works only on display: inline & display: inline-block elements.

Centering elements inside a list with vertical-align: middle css

4. float: center;

lol (You cannot center floated elements.)

It's impossible to both horizontally and vertically center an element with float: center css

5. Centering absolute

When this comes up, use transform and 50% coordinates to center an absolutely positioned element.

Centering child divs of a position: relative parent div with css

6. Centering with flexbox

Flexbox has a bunch of different alignment classes that are always applied to the parent. This here will be completely centered within the box.

Centering elements inside a div with flexbox css

7. the one I forgot ;-)

Alt Text

Discussion (28)

Collapse
slaweksk13 profile image
Sławomir Skrzeczyński

{ display: grid;
place-items: center}

would do as well

Collapse
rylandking profile image
Ryland @ Stackbit Author

@slaweksk13 Good catch! This is why they have me writing articles and not the product's code. lol

See #7! 🙏❤️

Collapse
bcowley1220 profile image
Brendan Cowley

I know I'm a bit fried... but I only count 6.

Collapse
abhilearnstocode profile image
Abhii
  1. float: center; lol (You cannot center floated elements.)

That too with one lol thing 😂

Collapse
rylandking profile image
Ryland @ Stackbit Author

lol

Collapse
rylandking profile image
Ryland @ Stackbit Author

lol

Collapse
rylandking profile image
Ryland @ Stackbit Author

I actually missed one that @slaweksk13 caught. Lucky enough we now have 7!

Collapse
dippas profile image
dippas

some notes;

  • vertical-align applies to inline-level and table-cell elements. It also applies to ::first-letter and ::first-line

  • for alignment in flexbox there's no need align-content nor flex-direction:column

Collapse
chrisgreening profile image
Chris Greening

.please-god-why-have-you-forsaken-me

Collapse
rylandking profile image
Ryland @ Stackbit Author

Been there. Far too often. lol

Collapse
drmalus profile image
Szklenár Ferenc

Maybe i don't understand exactly, what problem this article was designed to solve.

I mostly use 2 or 3 solutions depending on the "situation".
You have an easy time, when you are working with flex or grid items because you can easily center elements horizontally, vertically or both in it.
If you are in block or inline block context margin: 0 auto, margin: x auto y auto, text align: center can works for horizontal centering. But as you mentioned, you need to set the width if your display property is inline-block, because in that case your element inherits the block and inline level behaviors.

If you want to center vertically and you have fix height, the line-height "hack" can work. Otherwise you can play with items height, margin, padding etc.
You have another help in the form of absolute positioning.
You can absolute position the item in both axis (x,y) with the value 50% then corrigate with transform translate(x,y), translateX or translateY if your container elements position is other than static.

I think you have much easier time if you use flex or grid.

Good to know that flex and grid also creates Block Formatting Context which suppress margin collapsing for example.

Collapse
rylandking profile image
Ryland @ Stackbit Author

It can be hard to both vertically and horizontally center elements. Goal was to show the ways to do that.

Collapse
drmalus profile image
Szklenár Ferenc

Understand. Thanks for your answer! :) Yes you are right.
But what about display:flex; justify-content: center; align-items: center solution?
It isn't worked for you in some cases or something?

Collapse
alvaroantonio profile image
álvaro antonio

1 and #6 read "text-image: center", but this is not valid css. I understand #1 was meant as text-align, but I don't get what you meant in #6...

Collapse
alexandrostzoumas profile image
Alexandros Tzoumas

6 should have title

"Centering with flexbox"

Collapse
rylandking profile image
Ryland @ Stackbit Author

*updated the post too. thank you!

Collapse
rylandking profile image
Ryland @ Stackbit Author

Good catch! I got tired towards the end of this. :-)

Collapse
rylandking profile image
Ryland @ Stackbit Author

I got a bit tired/lazy and overlooked #6's title. Just updated! 👍

Collapse
yoshida profile image
Masao Yoshida

vertical-align works on the table cell too.

Collapse
amk profile image
Amran AL Ketara

Thanks!

Collapse
saroj8455 profile image
Saroj Padhan

Thank you

Collapse
rylandking profile image
Ryland @ Stackbit Author

Thanks for reading, Saroj!

Collapse
emekaorji profile image
EmekaOrji

CSS is not hell

Collapse
rylandking profile image
Ryland @ Stackbit Author

For some, my friend

Collapse
oluwaeinstein007 profile image
Sanni, Olanrewaju

I use
.center
{
display: flex;
justify-content: center;
align item: center;
}

Collapse
andrewright profile image
Andrew Garbuzov

Boolshit!
vertical-align: middle;
Works just for table-cell
developer.mozilla.org/en-US/docs/W...

Collapse
mikaleb profile image
Mikaleb

Or you have the excellent howtocenterincss.com that does that

Collapse
dova profile image
doVa • Edited on

"margin-inline: auto;" better than "margin: 0 auto;". But ie problem :D