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 num