How to Center a div in CSS
6 min read
The real Turing test is if the AI can center a <div> in CSS
— Jared Palmer (@jaredpalmer) October 2, 2020
TL;DR
The optimal way to center an element in CSS will vary depending on which of the following circumstances apply to your situation:
- Do you want to center the element horizontally or vertically (or both)?
- Are you trying to center a block element or an inline element?
- Do you know the width/height of the element or not.
Overall, in modern browsers, CSS Grid or Flexbox are great catch-all solutions.
Scenario 1: Aligning an Inline Element Horizontally
It's relatively easy to horizontally center an inline element (a, code, button, input, label, select, span, textarea, etc.). Only one CSS declaration is needed: text-align: center. Despite the name, this declaration will center any inline element, not just text. Here is an example in action:
Pros:
- Simple and easy to use, only 1 line of code
Cons:
- Only works with inline elements
Scenario 2: Child Element Width is Known And Only Needs to be Centered Horizontally
If you find yourself in this situation, consider yourself lucky because the solution is super easy: use margin: 0 auto. This works by setting the left and right margins to auto, which evenly distributes the horizontal space on either side of the div. Here is a basic example:
Pros:
- Simple and easy to use
- Works with both block and inline elements
Cons:
- Only centers horizontally
- Only works if the width of the element is known (such as a fixed width image)
- Doesn't work if the element is floated
Scenario 3: You need to Center an Element Both Horizontally and Vertically
Option 1: CSS Grid
There are a couple different ways to center a child element using CSS Grid, but my favorite is using the place-items CSS property. This property is a shorthand for align-items and justify-items. This means with only two CSS declarations, you can center a child element both horizontally and vertically. Check it out on CodePen:
Pros:
- Centers elements both vertically and horizontally
- Works with both block and inline elements
- Only requires 2 CSS declarations
Cons:
- The
place-itemsCSS property is not supported in IE11
Option 2: Flexbox
Another superhero CSS property of the modern CSS era is Flexbox. If you are new to Flexbox, two outstanding resources for learning how it works are A Complete Guide to Flexbox and Josh W. Comeau's An Interactive Guide to Flexbox. There are three critical CSS declarations required on the parent element in order to center a child element(s) using Flexbox, which are: display: flex, align-items: center, and justify-content: center. Here is an example on CodePen:
As you can see, there are some nice benefits to this approach. For one, it only requires adding CSS to the parent element. You don't have to modify the child elements at all. On the other hand, other solutions listed above are a single line, whereas this solution requires 3 whole properties. align-items: center and justify-content: center are responsible for centering the child element(s) vertically and horizontally. Flexbox can also be used in Scenario 1 and Scenario 2 above, making this a solid go-to option.
Pros:
- Centers elements both vertically and horizontally
- Works with both block and inline elements
Cons:
- Requires 3 properties
- Not fully supported in IE
Scenario 4: If None of the Above Options Work...
The last resort option I would choose is using position: absolute and the transform: translate property. This method requires the parent element to have position: static (which it is by default) or position: relative, then setting the child element to position: absolute, as well as setting the top, left, and transform properties, as seen in this example:
Pros:
- Can be used to center elements vertically and horizontally
- Works with both block and inline elements
Cons:
- Requires the use of several properties (top, left, and transform)
- Requires properties set on both the parent and child elements
position: absolutecomes with its own set of problems (removing the element from the document flow, etc.)
Wrap It Up
The inspiration for this article is the old joke that you're likely familiar with about how difficult it is to center a div in CSS (hence the name of this article). Before CSS Grid and Flexbox came along, centering an element vertically was often achieved using the position: absolute and the transform: translate property method discussed in the "If None of the Above Options Work..." section above. And before transform: translate came along, the position: absolute method was even more complicated. So it's understandable why the joke existed.
But times have changed. These days we have powerful CSS properties like CSS Grid and Flexbox, which make centering elements, both horizontally and vertically, rather trivial.
The way I see it, if you just need to center an inline element horizontally, go with the text-align: center option. For all other scenarios, CSS Grid or Flexbox should almost always work.
Code With Love
Take a break from the internet for a few minutes and go show love to someone. Remind a friend or family member why you are grateful to have them in your life. Smile at a stranger. It's the little things that make the biggest difference.
Remember ... When you code with love, you can change the world.
Now go change the world!