For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and mo

How To Center a Div

submited by

Style Pass

2024-02-13 18:30:05

For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice!

I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to handle centering in all sorts of scenarios.

Honestly, this turned out to be way more interesting than I initially thought 😅. Even if you've been using CSS for a while, I bet you'll learn at least 1 new strategy!

The first strategy we'll look at is one of the oldest. If we want to center an element horizontally, we can do so using margins set to the special value auto:

First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width.