WebDev Workshop logo

WebDev Workshop

tools, code, and books to take your web development skills to the next level

In the olden days of CSS, centering an element both horizontally and vertically within its parent was notoriously difficult. Style wizards stayed up until late at night coming up with ways to achieve this feat. They succeeded, but their techniques were obscure and convoluted. Then flexbox came along and changed everything by making it almost ridiculously easy to plop something smack dab in the middle of the page:

Yep, that’s all there is to it. Here’s an example:

Browser support: % (Source: caniuse.com)
Specification:

Text is Copyright Logophilia Limited.
Code is licensed under a  Creative Commons Attribution 4.0 International License.
Hand-crafted by Paul McFedries.