Centering Things with CSS Flexbox

By Chris on Code

Flexbox has been out for a while now in CSS. Looking at the Can I Use Flexbox page, we can see that it’s acceptable in all modern browsers and even a little in IE!

Centering things in CSS before flexbox was always a chore. None of the major methods ever worked 100% consistently. Flexbox makes centering items as simple as 3 lines!

To set an item to use flexbox, we just have to use the CSS display property:

div {
    display: flex;

While flexbox may seem easy to use with the above line, it can be very powerful if you understand all of its properties. Let’s see some common flexbox centering tasks and how we can achieve them.

Centering Horizontally with Fl