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
}



Preview


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
}

Preview

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;
}

Preview

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:

You can use the transform property to shift the element half its height up and half its width left to achieve the same result as above.


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

Preview


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.

Design by @KiMiDev

Đăng nhận xét

Cảm ơn bạn đã nhận xét, chúng tôi sẽ quay lại và trả lời cho bạn sớm nhất có thể !!!

Mới hơn Cũ hơn

Nhận xét Mới