Centering items with used to be pretty tough to do. Well, it’s not anymore. There are many different ways to do it now. And that’s a good thing because we may need different options in different scenarios. In this video we’ll look at three of my favorite ways to center items, We’ll use positioning, then we’ll use flexbox, and lastly, we’ll use my go-to CSS grid. HTML and CSS Alright, let’s get to it. https://youtu.be/XMH4c1xIZtE?embedable=true It’s really such an odd thing that it was so difficult for so long to simply place items in the center of a container on the Web. Well, horizontal centering was easy, but vertical centering was nearly impossible up until more recent years. Using CSS Positioning to Center Items This first method, using CSS positioning, has probably been around the longest, but it has evolved a little as newer properties have emerged. Let’s look at an example. Here we have this box that we want to center in this other container with the red border. It’s a strong element and it’s placed directly within a element which is this red box that we’re seeing here. div We’re going to use absolute positioning for this method so let’s add it to our element. strong strong {
    position: absolute;
} Now, for this to function correctly, our will need to create a positioning context for our item to be positioned on. There are many different ways to do this but the best option for this example is to use relative positioning. div div {
    position: relative;
} Now we can position our element down fifty percent of the height of our and over fifty percent of the width. To position down from the top we can use the new logical property, with a value of fifty percent. And, to position over from the left we can use with the same value of fifty percent. div inset-block-start inset-inline-start strong {
    ...
    inset-block-start: 50%;
    inset-inline-start: 50%;
} Ok, so it’s not exactly centered, is it? Well, this is because we’ve positioned the item in the center of our , but its position is based on its top left corner. What we need to do now is shift the item back up fifty percent of its height and back over fifty percent of its width. This will get it properly placed in the center. But, how can we do this? div It’s actually really easy. We can use the new CSS property. The first value will translate along the x-axis. We need to go back fifty percent, so we’ll add a value of negative fifty percent. And, the second value translates along the y-axis, we’ll give it the same value of negative fifty percent. translate strong {
    ...
    translate: -50% -50%;
} And there we go. Perfectly centered. Here’s the final working example using positioning and translation: https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true So, this is one way we can do it, but it’s not my favorite. Using Flexbox to Center Items If I can, I prefer to use Flexbox over positioning because it’s even easier, requires fewer lines of code, no positioning context, and honestly, it just feels like a better, more modern solution. Let’s look at an example. Ok, so we’re starting from the same point, we have our outer div with the red border and then our inner strong element. We start by making our div a flex container with display, flex. Then we can align our item to the center along the x-axis with the property and a value of center. And last but not least, we can align along the y-axis with the property and the same value of center. justify-content align-items div {
    display: flex;
    justify-content: center;
    align-items: center;
} And there you have it, the item is properly centered and it only took three lines of code to get there this time. Here’s the final working example using Flexbox: https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true So that’s cool and I sometimes have the need to do this, but my favorite way to position items in the center is to use CSS grid. And again, my reasons for this are because it’s even easier than and requires even less code. flex Using Grid to Center Items Ok, same starting point with the red box and inner item. This time we’ll make our div a grid container with a value of . Now what’s cool here is that we can use the same two properties that we used for our flexbox example if we want. We can add and . It works the same exact way. display grid justify-content: center align-items: center div {
    display: grid;
    justify-content: center;
    align-items: center;
} Kind of funny but it’s just the way grid works, it can use the same box-alignment properties that flexbox does. But, if we left it this way there’d really be no advantage to use grid right? Well, what we can do instead is, remove these alignment properties, and replace them with the place-items property. And, we can give this property a value of center. div {
    display: grid;
    place-items: center;
} There we go, now we’ve whittled it all the way down to just two lines of CSS. Here’s the final working example using CSS Grid: https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true Conclusion So like I said earlier, it’s a lot easier than it used to be that’s for sure. But all of these techniques are still very relevant and may be needed due to any number of circumstances so it’s good to know all of them just in case. I would definitely prefer the least amount of code CSS grid, and if that doesn’t work the next best thing flexbox, and if neither of those work, try positioning. Also published . here

How to Use Angular @Input to Pass Data to Dynamically Created Components

CSS Masks Guide: Solutions to Common Design Challenges

Buy Me a Coffee

Too Long; Didn't Read

Make resilience your competitive advantage

3 Contemporary CSS Techniques for Centering Items

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

4 Ways to Dynamically Add Classes in Angular

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

4 Ways to Dynamically Add Classes in Angular

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps