CSS 101: Centering Elements

David Aji — Fri, 27 Mar 2020 00:00:00 GMT

*This blog post was originally published [here](https://ajiva.hashnode.dev/css-101-centering-elements) on March 27th 2020* I keep seeing developers complain about continuously googling how to center elements each time they try to achieve this. Well, I'm here to solve your problem. I'm going to show you different ways to center elements in css and when to use them. Banter from designers like this must end. ![Designer complaining about centering elements](https://cdn.hashnode.com/res/hashnode/image/upload/v1590498021321/1-hsGPk6U.png) Let's get into it. # 1\. Good old "Text-Align: center" This method is really popular and though it's normally used for text, it works well for any element. Basically you give the parent element of what you want to center a ```css text-align: center; ``` Note: The child element has to be an **inline** or **inline-block** element for this to work. See the Pen CSS Centering - Text Align by David Aji (@Ajiva) on CodePen. As you can see from the above example, the **p** element inherits its text-align from the "grand-parent element" # 2\. Using Margin: auto All you have to do is give an element a specific width and set it's the horizontal margin to auto and the element will be centered horizontally. See the Pen CSS Centering - Margin Auto by David Aji (@Ajiva) on CodePen. This method could come in handy when creating signup/login forms that need to be centered 😉 # 3\. Transform/Translate method Now, we've all been in positions where we want to place an element in a particular position where we need ```css position: absolute; or position: relative; ``` But at the same time, this element needs to be positioned centrally either horizontally or vertically. Well, I got you. Here's a simple way to get this done. See the Pen CSS Centering - Transform/Translate by David Aji (@Ajiva) on CodePen. From the above, you can see that the **relative-box** is horizontally positioned. This is achieved by giving the element a ```css left:50%; ``` and using transform to offset the x axis with ```css transform: translateX(-50%); ``` achieves **centralization**🤯 This is the same for the **absolute-box**, just reversed to centralize vertically this time; Note: you can achieve both horizontal and vertical centralization on one element like this ```css left:50%; top:50%; transform:translate(-50% , -50%); ``` # 4\. The Grid method Yet another wonderful way to centralize elements is using css grid. it's simple and straight to the point. See the Pen CSS Centering - Grid by David Aji (@Ajiva) on CodePen. A flaw with this method is when you need to centralize vertically that's ```css align-items: center; ``` You need to specify something like Which may be overkill. But that's why the next method is perfect for you. # 5\. The Magic of Flexbox method They say, "Save the best for last" right? This is the best of the bunch. I'm sure you can tell from my enthusiasm that this is definitely my favorite method. The flex method is so simple, clean, effective, and very versatile. You can make responsive changes by changing just one or two properties smoothly. See the Pen CSS Centering - Flexbox by David Aji (@Ajiva) on CodePen. All the methods are great but I'll recommend using the **flex method** most of the time, and also switch to others when necessary, like the **transform/translate method** when you're dealing with **positiioned elements** I hope I've been of help, and I've forever solved the great mystery of centering elements in css.

David Aji's Blog

CSS 101: Centering Elements