Absolute Horizontal And Vertical Centering In CSS | Smashing Coding

We’ve all seen margin: 0 auto; for horizontal centering, butmargin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles:

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

I’m not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article.

There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method.