Centering Vertically and Horizontally Using Flexbox |


by kirupa | 27 January 2012

Strangely enough, one of the more difficult things to do using CSS is centering content. Centering content horizontally is relatively easy. Centering content vertically is a whole different story. If you've ever tried it, it is hard - especially if you want to avoid using tables. Fortunately, our cries for help were heard, and one of the new weapons added to the CSS3 arsenal to solve this problem is a layout type known as the flexible box layout...also known as flexbox. Flexbox provides you with some really nifty functionality that makes centering content either horizontally or vertically a snap!

This is a companion discussion topic for the original entry at


That was a clean explanation. Your post saved my day bro.


Glad it helped :stuck_out_tongue:


This is exactly what I needed! Thank you!