How to Center an Element in CSS

How to Center an 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.

How 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 auto:

To center an Element or element in CSS using Margin property you first need to set that elements 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 center 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 box:

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.

.container{
    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 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.

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

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

Method 4: Using position:

.child{
position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

Bonus Method:

You can use native HTML center element (<center>Content to center</center>) to center it's child elements on a webpage.

These methods can be used to center image, 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.