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.

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

text-align: center;

Note: The child element has to be an inline or inline-block element for this to work.

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.

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

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.

From the above, you can see that the relative-box is horizontally positioned. This is achieved by giving the element a

left:50%;

and using transform to offset the x axis with

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

     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.

A flaw with this method is when you need to centralize vertically that's

align-items: center;

You need to specify something like

grid-template-rows: 100%; 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.

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.

Checkout my website and follow me on twitter if you like this.