You’ve got a good handle on HTML and you just started learning CSS. Everything is going great … until you say to yourself, “Oh, wouldn’t it be nice if this DIV was centered?”.
We will go over 5 ways to center things using CSS and talk whether each is still a viable option in 2023. This will be focused more around centering things like DIVs and Images, not text (text for the most part is very straight forward). But before doing that, let’s define a structure that we can use across all examples.
<div class="container">
<!-- other random content goes here -->
<div class="content">This div is centered :)</div>
<!-- more random content goes here -->
</div>Why this structure?
When trying to think about CSS, the best way I’ve found that helps me is visualizing everything as rectangles which is why you will see in the codepens that I have given everything a border. With this structure we have a rectangle called container which simply just wraps around our content. Within our content, we have another smaller rectangles called content and this is what we will focus on. How do we get the content rectangle to be centered inside of the container? Let’s look at our options …
1. Table properties
.container {
display: table;
/_ set below as per requirements _/
height: 100vh;
width: 100vw;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}Back in the late 1990s and early 2000s, browsers had limited support for CSS, so developers had to get a bit creative with solutions. This was when the most popular way to create a layout for a website was to use a table.
The method is pretty straight forward. We define the container as a table and the div we want to center as the only cell. Now, using vertical-align and text-align the desired outcome is achieved. Although historically the most common use for vertical-align was with table cells, this is not the only context in which it can be used. It is also important to note that it does not vertically center block-level elements within their parent container. For such cases, the methods we will talk about later are better suited.
Would I use this method in 2023?
Although it is important to know how far we’ve come from a CSS standpoint, I would avoid using this method. Firstly, trying to get a table layout to be responsive is a nightmare. Secondly, depending how complex the content you are trying to center is, with this method you will end up having to spend a lot more time either planning things out or refactoring the entire layout because of a requirement change. Lastly, we touched on it above but vertically centering block-level elements within their parent container is a problem.
2. Absolute positioning
.container {
position: relative;
/* set below as per requirements */
height: 100vh;
width: 100vw;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Absolute positioning is an interesting one. The idea behind this method is that we have our container and within it we can position our content rectangle using pixel-perfect control over the element’s location.
In this example, by giving absolute positioning to the div we want to center we can move it around using properties like top and left. Let’s look at what each property does:
top: 50%moves the top edge of the div so that it is aligned with the vertical midpoint of the containerleft: 50%moves the left edge of the div so that it is aligned with the horizontal modpoint of the containertransform: translate(-50%, -50%)moves the element based on its own width and height, not the container’s
Why is the transform property needed?
When using top and left properties, they are taking the top left corner of the content and centering it in the container. This gets us close to our desired goal, but if we just stopped there it will always look “off”. That is because for it to be truly centered, we want the middle point of the content to match the middle point of the container. And that’s where the transform property comes in. It moves the content based on its own height and width, not that of the container. Now we have our desired result.
Would I use this method in 2023?
It depends. Would I use this to build an entire website? No. We will look at way better, and more scalable options later. Would I use it for specific cases? Yes. One of those specific cases for example would be modals. The goal of a modal is to be centered on the entire page without affecting the content of that page. By manually positioning it where we want by using absolute positioning, we can achieve our desired outcome.
Depending on your requirements, if a modal is what you are going for, consider using the dialog html element.
3. Margin auto
.container {
/* set below as per requirements */
height: 100vh;
width: 100vw;
}
.content {
width: 50%; /* can be any specific width */
margin: auto;
}In very similar fashion to absolute positioning, margin auto should also not be your number one choice when it comes to the entire layout of a website. So where does it shine? Just about any time simplicity is needed in order to center horizontally a block-level element with a specified width inside a container.
What does auto actually mean?
When setting the margin to auto for a block-level element, it will simply just take the remaining margin space horizontally and evenly distribute it between the left and right side. By doing so, we achieved our goal of centering our content within the container.
What’s so special about margin auto?
What I find interesting about it, and also why it is so high up on my list, is that it can be combined with either absolute positioned elements or flexbox items (we will touch on flexbox a bit later).
With absolute positioning, it can be used as a replacement for transform: translate(-50%, -50%) as long as we are working with explicit dimensions and both pairs of opposite offets are set (top, left, bottom and right).
If you’re familiar with flexbox already you might be asking, “Why use margin: auto if I can just use justify-content: center?”, which is a very valid question. The difference comes down to the specific layout requirements and the desired level of control. With justify-content, all flex items will be centered. With margin auto, only the specific item will be centered or pushed away from others.
Would I use this method in 2023?
As we will see with the next couple examples, they can handle pretty much anything you throw at them. BUT, as we discussed above, there are a few very specific scenarios where margin: auto would make sense so I would use it there.
4. CSS Grid
.container {
display: grid;
place-items: center;
/* set below as per requirements */
height: 100vh;
width: 100vw;
}
.content {
/* can be any specific width/height */
width: 50%;
height: 50%;
}Remember the first centering method we talked about? Using a table? And how that was a hacky way they used back in the day to center things and create layouts? I present to you CSS Grid. Although an oversimplification because they are both grid-based layouts, I like to think of CSS Grid as a table on steroids.
CSS Grid, as the name implies, creates a grid layout in a similar way to a table where there are rows, columns and the content lives in grid cells. The big differences though are it’s flexibility, responsiveness and performance. Basically everything that a simple table was lacking.
Would I use this method in 2023?
Definitely. When dealing with two-dimensional, complex, or asymmetrical layouts, or explicit placement and template area definitions, nothing beats CSS Grid.
So why is it not at #1? To keep it short, it would be because of the learning curve and complexity. I believe most people won’t be creating a complex enough website to where the time investment (both learning and implementing) would be justified. Don’t let the wow factor of this fancy solution side track your side project … we all have too many unfinished side projects.
5. Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
/* set below as per requirements */
height: 100vh;
}
.content {
/* can be any specific width/height */
width: 50%;
height: 50%;
}Flexbox is the opposite of CSS Grid. It is best for one-dimensional layouts, space distribution, and content-based alignment. On top of that, it is fairly easy to pick up. This is the cheat sheet I always find myself coming back to when my Flexbox skills get a little too rusty.
The one-dimensional layout is very powerful. Although everything is in a single row/column, with it’s wrapping capabilities and adaptability to dynamic content sizes it can create flexible and responsive layouts.
Would I use this method in 2023?
Flexbox is the current Gold Standard and for a good reason. It is extremely easy to use, development is quick and it can apply to most scenarios. After using it for a few weeks, you will find that the way you plan and think about layouts comes pretty naturally with Flexbox.
Flexbox vs CSS Grid
Although I plan on writing about this topic a bit more extensively in the future, the short answer you are looking for right now is there is no short answer. It all comes down to the requirements for your project. Are you dealing with a simple or complex layout? Is it one-dimensional or two-dimensional? Do you already know one of them and are on a time crunch? These are all questions that need to be answered each and every time a new layout needs to be created.
The good news, though, is that it is not Flexbox OR CSS Grid. You do not have to pick one and be stuck with it forever. The two can actually work in tandem, as they complement each other. Only by learning and mastering both can you finally say the words, “I know how to center a DIV”.
If you found this useful, make sure to check out my other articles and my YouTube channel!