This is my favorite vertical centering method [1] and combined with the table/table-cell method, it allows me to avoid using JS for layout about 95% of the time. It's not very well-known and even though I've used CSS for well over a decade, I have no idea why it works.
The real trick is realizing that `margin:auto` actually does do something, so long as you set a fixed width/height and position: absolute with dimensions set to 0. But for the life of me, I don't understand why that happens to trick the box model into working properly. But this technique is fantastic and really helps out when table/table-cell interacts badly with your styles, or you need to support older browsers.
I would be very happy if someone in the know could explain why this technique works.
The real trick is realizing that `margin:auto` actually does do something, so long as you set a fixed width/height and position: absolute with dimensions set to 0. But for the life of me, I don't understand why that happens to trick the box model into working properly. But this technique is fantastic and really helps out when table/table-cell interacts badly with your styles, or you need to support older browsers.
I would be very happy if someone in the know could explain why this technique works.
[1] http://codepen.io/anon/pen/whHIL