The State of CSS Centering in 2026

anchor positioning flexbox grid layout The State of CSS Centering in 2026 Temani Afif on May 22, 2026 What? Another article about centering ?! But all we have to do is use display: flex | grid , then align-items: center . No, it’s align-content … wait… I think it’s justify-content . Well, let’s use margin: auto , this one works all the time, right? Despite the countless number of online resources (even CSS-Tricks has a full guide on it), it’s easy to get confused when trying to center an element, whether vertically, horizontally, or both). I am sure you will find something that works by googling or trying different combinations. But do you really understand why the code you picked works? Is it the right one for your use case? Because it really does depend and require consideration! In this article, we will do a fresh exploration of centering in CSS, and hopefully, you will learn something new by the end of it. I already master CSS centering. Should I skip this article? Stay with me because we will explore hidden tricks and modern features that you may not know — safe centering, text-box , centering in anchor positioning, etc. Is centering still hard? No, centering is not hard. Considering all the different and various ways to center an element, it’s an easy task that generally requires two or three lines of code. But, how many ways do we have to center an element? I did the count, and I was able to enumerate 100 different ways to center an element vertically and horizontally within a container . Are you serious,100 ways?! That’s insane. Yes, 100 is a ridiculously high number for what should be a simple task, but that number is misleading. If you check the list, you will find I marked about 60 of them in red, meaning they are hacky and not recommended. This leaves us with roughly 30 valid approaches. And within those valid options, many are basically the same, only written differently, so we can consider them redundant. At the end of the day, the number of “unique” and “valid” ways to center an element is less than 15 (or even 10) but it was a fun exercise enumerating the different codes that can center an element. Go check the full list , you may learn something new! Let’s look at things from a beginner’s perspective. For me, who has been writing CSS day and night for years, it’s easy to say “centering is not hard,” but what about to a newcomer who reads this and confronted with all those different ways to center stuff? Nah, it’s not easy at all. align-items , align-content , justify-content , place-self , margin: auto . What the hell?! Too many properties for a task that everyone claims is easy! Well, let’s pick a code that works and move on. After all, if the item is in the center, then it’s fine, right? Let’s avoid making a lot of noise around this, or the CSS fanatics will shout at me. Don’t think that way! Centering can be hard, and that’s fine. It doesn’t mean you are stupid. It simply means you need to understand how