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.