How to center a div in the middle of the page using CSS?

Sometimes, when we are designing a webpage, we need to center a div(or any other element) in the middle of a page. But, we often find it difficult because there is no direct property in CSS that can center a div in the middle of the page.

However, this is not that difficult too. In this tutorial, we will see a few easy and efficient methods that can help us center a div in the middle of the page very easily. So, let’s discuss each:

Center a div in the middle of the page using the position property

If you want the div element to always stay in the middle of the page, you have to first set its position property to fixed value. Here, position: fixed; means that the div element will always stay at a fixed position and it will not move even if you scroll down the page.

Example:

div{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    text-align: center;
    padding: 20px;
    background: cyan;
}

When we set the top, right, bottom, and left properties to 0 along with position:fixed;, the div element hypothetically takes up the full width and height of the element.

So, applying margin: auto; on this div element forces it to take up its actual width and height and centers it in the middle of the page.

If you want the div element to stay at the center of the page but want it to scroll along with the page, you can have to set the position property to absolute. The rest of the properties will remain the same as in the case of the position: fixed;

Example:

div{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    text-align: center;
    padding: 20px;
    background: cyan;
}

Center a div in the middle of the page using transform property

You can also center a div in the middle of the page using CSS transform property. This is also similar to the above methods. The only difference is that we are using the transform property in place of the margin property to center it in the middle.

Example:

div{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    text-align: center;
    padding: 20px;
    background: cyan;
}

Center a div in the middle of the page using calc()

You might have thought why don’t we just put top: 50%; and left: 50%; to center the div? Well, it will never place the div in the middle of the page because the div element has a height and width too.

So applying top: 50%; actually places the div at 50%+height/2 position from the top. The same is true for left: 50%;. Therefore, to center the div in the middle we have to subtract that extra value from the top and left values and it will be perfectly centered.

Example:

div{
    position: fixed;
    top: calc(50% - 150px/2);
    left: calc(50% - 150px/2);
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    text-align: center;
    padding: 20px;
    background: cyan;
}

Note: In this method, it is important to apply the box-sizing: border-box; property on the div element so that the total width and height of the element should not vary with the padding and border values. If it is not used, the element will not be perfectly centered.

You can read more about the box-sizing property here-> CSS box-sizing-property