This article may not be everyone’s cup of tea but it was so surprising to me that it warranted it’s own post. Ever since I started with CSS, I never understood why there wasn’t a simple way to center something horizontally or vertically. Vertical centering has always been the bane of CSS. It got easier with flex but it shouldn’t need that. But finally…

In August, a new solution was introduced: align-content: center;

Now, instead of having to use multiple properties for a solution on spacing, you can simply use the new align-content single solution.

Why Vertical Centering Has Been Challenging in CSS

Some of the most common programming languages and software are getting old. That doesn’t mean they’re obsolete, it’s quite the opposite, but it does mean that many won’t be capable of modern design/style choices or functions. At least, not without a little tweaking.

That’s why vertical centering was so difficult in CSS. It simply wasn’t designed for it. CSS was created to style HTML pages. So the parameters of HTML were essentially what CSS was designed around. Considering that the first version of HTML couldn’t even support images, that should tell you about just how archaic it was for modern ideas.

HTML was originally designed for paragraphs, not for the kind of centering that allows for more unique style choices.

In case you’re wondering how developers felt about this, you can check the old Reddit time capsule for some horror stories. Some of their workarounds included padding the content with grids or gifs, or even adding display: table-cell to create the needed space.

The flow layout is the more basic, and effective, layout for a web page. That’s why CSS was designed around it and that remains to this day. Thankfully, though, devs don’t have to juggle multiple elements or dig through social media for these workarounds anymore, but it’s always interesting to see what exactly they did to create vertical centering.

Previous Methods for Vertical Centering

Table Cells

Table cells were one of the first options for vertical centering. This included setting the parent div to be a CSS table and then setting the child div as a table cell. Then, with vertical-align: middle, devs could center the contents and get the desired style/layout.

The reason this is a bit inflexible is that devs are forced to work with the alignment provided by said table. There’s not any literal wiggle room to work with because of how set the elements are.

Absolute Positioning Hacks

This hack is over a decade old at this point. Absolute positioning relates to placing an element in a precise location on a web page. Sounds fairly simple, right? Top, bottom, and transform with absolute positioning can often do what relative positioning and a normal layout cannot do.

The problem is that absolute positioning overrides the default flow layout on several browsers. That might not be an issue for you, but it will be an issue for several users who try to access the page. It’s going to be fairly hard to maintain a web page when you can’t even predict how the layout will work for different users.

Flexbox to the Rescue?

Flexbox can be rather helpful when it comes to vertical centering. All devs have to do is use the Flexbox’s align-items property and then adjust the element on the cross-axis. It’s simple, but it also typically includes nesting.

Having different styles on a single element is basically a necessity these days. The problem is in nesting those interactive layers are often nested inside each other. That could affect functionality and cause a number of other problems for users. Plus, Flexbox has issues like overly sticky elements and text containers that don’t always act the way you want them to.

CSS Grid’s Attempt

CSS Grid helped to address the vertical centering issue when it was first published in 2007. It added complex, responsive grid layouts that would behave normally across different browsers. With the grid layout system, devs can create complex layouts that work consistently without much worry. Useful, but a bit of an overcorrection. When you want to align or center some content, having a complex layout of grids isn’t the simple solution many developers want.

Since each of these solutions comes with a caveat or two, it makes sense that devs were waiting for the solution that we finally have.

The Challenges to Implementing align-content: center;

Why Did It Take So Long?

As I mentioned, CSS has grown up in the last few years. When it was first conceived, it was a unique way to style sheets in different ways. Now, it’s a cornerstone of modern web design. Considering over 95% of websites use CSS, it had to evolve at some point. While additions like Javascript have helped to get the most out of CSS, the language continues to evolve to the point where many devs rely on “pure CSS” to create their pages.

That evolution didn’t come overnight, though.

There are over 140 members in the CSS Working Group, which is a group of developers that attempt to address any user issues or feedback that have arisen with the language. As you can imagine, a lot of issues have been solved. The problem is that those issues have to be solved across the board. That board includes dated websites that still run using CSS. Whenever a change needs to be implemented for the latest update, how this affects the backward compatibility of different tech becomes a major concern. That’s one of the many reasons it took so long to get a direct fix for vertical centering. New features can affect old code and page layouts, so it took some time before the working group was confident in a solution.

Now that they have, does it live up to the hype and expectations?

How align-content: center; Solves Vertical Centering

No more padding or invisible tables. No more grids creating complicated solutions to fairly simple problems. Vertical centering is now made easy, with align-content more easily creating the necessary space between items to create the layout devs want. It’s simple, clean, and it’s adjustable. Depending on the different values, alignment can be altered and different items can be placed wherever needed. Simple as that.

That doesn’t mean this solution will work on complex issues though. When utilizing align-content: center; it’s more suited for basic text blocks, elements, and simple containers. It’s not an effective means of creating complex layouts with multiple elements that interact with one another. It’s a simple fix for a simple problem, and it’s fairly easily implemented.

The Future of CSS Layouts

What does this mean for the future of CSS? Simplicity, to put it simply. Vertical centering isn’t the only programming issue to get an overly complex solution. While the previous solutions don’t always seem time-intensive, they’re certainly a lot more complex than align-content: center;. Over time, that becomes more of an issue, especially for fixes like Flexbox or the CSS Grid. The more basic a web page the more likely it is to run across a number of platforms, so it’s always best to go for the simplest answer.

When you have to create additional elements just to center a text box, you increase the chances of someone using Firefox or Opera experiencing a problem. With this new simple solution, you can see how align-content: center; works with different browsers on this Mozilla page.

Not only do you get simplicity and usability, but you also get consistency. Those previous solutions solved the same problem but not in the same way. One browser could be showing a completely different layout than another and that’s a whole new problem in and of itself. Now, this simple fix introduces a universal solution that’ll be experienced the same way by every user.

That means fewer problems, more accessibility, and most important of all, more users!