As a front-end developer, you’ll often times run into a situation where you need to absolutely center an element. Unfortunately, CSS doesn’t really give us an easy solution. Sure, if you want an element centered horizontally that’s pretty easy. We can do something like:
#element { margin: 0 auto; }
Or if you’re working with an in-line elements you could use:
#element { text-align: center; }
That’s all fine and dandy, but what if you need something smack-dab in the center?
The CSS Technique
Positioning an element in the absolute center can be accomplished with CSS. In order to do that you will need to know the following:
- The height and width of the element you want centered.
- The height and width of that element’s parent container.
