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 ;-)