How to Easily Center stuff with Flexbox

Photo by Unsplash

A Brief History of the CSS struggle

Centering elements on a web page has been historically cumbersome and harder than it should be. In ye olde days, tables reigned supreme as they were the only HTML element that allowed centering to some degree.

In November 1994 a CSS Proposal was announced at the Web Conference in Chicago. This was the beginning of the web as we know it but it still had a long way to become what we know today.

If you go to 1998 google using the wayback machine you can check the source and see that it was only an img tag and some tables.

Centering elements on the web was a lot easier once automatic margins were introduced, on later versions of CSS. In theory, you could throw auto margins at any element in the box model and it should automagically center itself within their scope, however, this only worked partially since it was hard to work with the vertical axis of this solution. This was a major pain point for most web developers in the early 2000s, how to vertically center elements in using the box model.

It wasn't until 2013 that W3C released a working draft of Flexbox which was promised to solve this and other long-standing pain points.

Why We're Here

I know you didn't come here for a history lesson, especially one that happened some 30 years ago, let's get our hands dirty with some real world 2019 methods of centering elements on your web page.

Horizontal centering is pretty straightforward depending on your needs. You can get away with slapping auto margins on your element and it would work most of the time.

.item{
  margin: 0 auto;
}

If your ambitions go beyond centering a single element, flexbox is here to save the day. In this case, you won't make a rule for the elements you want to center, you will make rules for its container and everything inside will fall along the lines of those rules.

Horizontal Axis

.row{
  /* 
   * all children are automatically
   * considered columns
   */
  display: flex;
  flex-direction: row;
}

Vertical Axis

.column{
  /* 
   * all children are automatically
   * considered rows
   */
  display: flex;
  flex-direction: column;
}

Once your container has the right direction, we can center the items along the main axis of our container by setting justify-content: center;, this is cool we now have our content centered along either axis of the container, but, why not both?
This could be useful to display centered elements on a fullscreen container, or to make a grid system, we are not going that deep into flexbox's possibilities in this post, if you want to see what could be accomplished with flexbox as a grid system I recommend you check the Bulma CSS Framework, it's one of my favorites. What we are trying to accomplish here is much more trivial, center our elements in both its axis, we just need to add align-items: center; and this will change the alignment in the perpendicular axis. By joining both justify-content and align-items we can have our child elements centered in both the X and Y planes.

.centered{
  align-items: center;
  justify-content: center;
};

If you want something in the center of the screen all you need to add is height: 100vh; and your content will be there.

Conclusion

A few years ago, having elements in the exact middle of the screen was a mere illusion that very crafty web devs created through complicated and often rigid solutions, nowadays you can toss 6 lines of CSS and make it happen.

Happy 2019 🎉 would you like to continue reading about the history of CSS?
You can check out W3's History of CSS which was used to help write this post. For more information about flexbox visit CSS-Tricks' Complete Guide to Flexbox which is a great resource.