How to Center an Element in CSS
M.Muzammil

How to Center an Element in CSS

By M.Muzammil | February 03, 2023

How to center element in CSS

Centring an element on a webpage is a challenging thing for beginner web designers. This can be achieved using CSS. To center an element you don't need to dive deep or master CSS.

Three Ways to center an element in CSS:

In this article, I am going to share with you three ways to center an element using CSS.

Method 1: Using Margin Property:

To center an Element or element in CSS using the Margin property you first need to set that element's scope to block or set its display property to block. Like display: block;. For elements that are already of block scope, you don't need to do so.

To center an Element in CSS you need to set margin: auto; if the element is not a block scope then display: block; is also required.

.center{
    display:block;
    margin:auto;    //    Centers element in horizontal direction only
}

Using the Margin property your element will be aligned to the center only in the horizontal direction. If you want it to be centered in both directions, you need to set display: flex;

DIV is already a block scope element so you don't need to set its display property to block;

Method 2: Using Flex Property:

Flex is another CSS property used to center an element on a webpage. You need to set elements display property to flex to do so.

Using Flex property, you can center your element in both directions which is not possible using margin property.

.center{
    display: flex;
    align-items: center;            //    To center element Vertically
    justify-content: center;     //    To center element Horizontally
}

Method 3: Using Grid Property:

Not supported in all browsers yet but will be in the future. Grid is one of the best and my personal choice to center any element on a webpage. But, I still do not use grid because it is not supported in all browsers yet.

Grid is not my personal choice, it is on the top list of many web designers to center an element on a webpage.

To center an element on a webpage using Grid CSS property you need to set elements display property to Grid.

Grid property aligns element to center in both directions like flex but it requires less code.

.center{
    display:grid;
    place-items:center;
}

Once again, the grid is not supported in all browsers. It is only supported the latest versions of new and modern browsers like firefox, chrome, etc. but it will be supported in all browsers very soon.

Bonus Method:

You can use native HTML center element (<center>Content to center</center>) to center its child elements on a webpage. but wait, unfortunately, this element is deprecated. It works but it is not recommended.

These methods can be used to center images, div, or any element on a webpage.

Conclusion:

These are the three ways to center an element on a webpage you can use any one of them according to your requirements.

If I missed any other method please leave it in the comments section.

Related Posts

M.Muzammil
M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

2 Comments

kisan gond

Thank you for sharing helpful article.

M.Muzammil Author

Thanks for Sharing your Feedback :D