Ever have this happen? lol
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.
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.
3. vertical-align: middle;
This works only on display: inline & display: inline-block elements.
4. float: center;
lol (You cannot center floated elements.)
5. Centering absolute
When this comes up, use transform and 50% coordinates to center an absolutely positioned element.
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.
7. the one I forgot ;-)
Oldest comments (31)
I know I'm a bit fried... but I only count 6.
That too with one lol thing 😂
lol
lol
I actually missed one that @slaweksk13 caught. Lucky enough we now have 7!
{ display: grid;
place-items: center}
would do as well
@slaweksk13 Good catch! This is why they have me writing articles and not the product's code. lol
See #7! 🙏❤️
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...
6 should have title
"Centering with flexbox"
Good catch! I got tired towards the end of this. :-)
*updated the post too. thank you!
I got a bit tired/lazy and overlooked #6's title. Just updated! 👍
.please-god-why-have-you-forsaken-me
Been there. Far too often. lol
CSS is not hell
For some, my friend
vertical-align works on the table cell too.
I use
.center
{
display: flex;
justify-content: center;
align item: center;
}
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.
It can be hard to both vertically and horizontally center elements. Goal was to show the ways to do that.
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?
Thank you
Thanks for reading, Saroj!
some notes;
vertical-alignapplies toinline-levelandtable-cellelements. It also applies to::first-letterand::first-linefor alignment in flexbox there's no need
align-contentnorflex-direction:columnThanks!
"margin-inline: auto;" better than "margin: 0 auto;". But ie problem :D
Or you have the excellent howtocenterincss.com that does that
Boolshit!
vertical-align: middle;
Works just for table-cell
developer.mozilla.org/en-US/docs/W...