How to center an element in web page using CSS

Every now and then I run into the following question from web page development community.

How do you center a div or some HTML element inside a div or parent element?

A lot of people provide different solution to this problem. A lot of solution use specifying values for margin-left and margin-right to provide this horizontal alignment. The fundamental solution is to figure out how much to push the left position of the inner element so that it will position it correctly in the middle. If you have to describe this as as mathematical equation, then it will look like below.

margin-left = (center of parent) - (half of width of inner element)

Let's look at the following example. In this example, I want to ensure that inner element (blue box) is half the size of the parent box (red box) and is always centered inside the parent box.

I have used following HTML and CSS to accomplish this goal.

/* Profile box styles*/
.auction-profile {
    width: 300px;
}

.half-width {
    width: calc(50%);
}

.h-center {
    --thisWidth: calc(50%);
    width: var(--thisWidth);
    margin-left: calc(var(--thisWidth) / 2);
}

<div class="auction-profile" style="background-color: red; color: white;">
        <h2>Auction 1</h2>
        <div class="h-center" style="background-color: blue; color: white;">
            <label>Name:</label><span>XBox Sale</span>
        </div>
    </div>

Let me explain what this HTML and CSS is doing to make this work. For demonstration purpose, I have set fixed width of RED box by using .auction-profile CSS class. Next I have added a div inside parent div and assigned it .h-center CSS class. It is inside .h-center class that all position calculations are taking place.

• Calculate a variable named --thisWidth and set it value to half the width of parent element. This is done by using calc() CSS function.
• Assign calculated width to width property of this CSS class. This will ensure that width of inner element will always be 50% of parent element.
• Calculate margin-left CSS property of inner element by dividing width of inner element by 2. This way it will be positioned at a distance from left such that it is always centered inside outer element.

Above implementation has a flaw. This calculation will only work if you are trying to make the inner element to be exactly half the size of outer element. If you will set the width property of inner element to any value other than 50%, the inner element will not be positioned in the middle. So, how do we make this .h-center to work for all cases? We just have to go back to our basic mathematical equation of calculating margin-left. Following code shows the implementation of .h-center that will work for any value of width of inner element.

.h-center {
    --thisWidth: calc(33%);
    --parentCenter: calc(50%);
    width: var(--thisWidth);
    margin-left: calc(var(--parentCenter) - calc(var(--thisWidth)) / 2);
}

For above implementation, I have set the width of inner DIV to be 33% of the parent DIV. The output of this implementation looks like below.

You can play with above CSS class by varying width value specified in --thisWidth variable. The inner element will always be position correctly in the center of outer element.

Before you this very dynamic solution, do check compatibility of browsers you support for your application. Some older versions of browsers including Google Chrome, do not support use of var inside CSS class. Other than that, this is a very clean and robust way to controlling position of inner element inside the outer element.