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 ;-)
Top comments (31)
{ 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! 🙏❤️
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!
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:column.please-god-why-have-you-forsaken-me
Been there. Far too often. lol
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?
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"
*updated the post too. thank you!
Good catch! I got tired towards the end of this. :-)
I got a bit tired/lazy and overlooked #6's title. Just updated! 👍
vertical-align works on the table cell too.
Thank you
Thanks for reading, Saroj!
I use
.center
{
display: flex;
justify-content: center;
align item: center;
}
Thanks!