How to Center a Div Horizontally in CSS

1. Use the margin Property to Center a div Horizontally in CSS
2. Use Flexbox to Center a div Horizontally in CSS
3. Set the div to inline-block and Use the text-align Property to Center It Horizontally in CSS

The article will discuss a few ways to horizontally center a div in CSS.

Use the margin Property to Center a div Horizontally in CSS

Using the margin property, we can center a div horizontally in CSS.

The margin property is a shorthand to set the margins of all the four directions from an element. We can use the property to assign the margins to the top, right, bottom, and left in order.

We can use the auto option for the left and the right margin to horizontally center a div. The top and bottom margin can be set to 0.

The auto option will place the element in the center and divide equally divide the left and right margin. We should specify a width to the element to be centered.

The element will occupy the given width, and the remaining horizontal space will be split equally to the left and right.

Let’s take an example. If the width of an element is 50%, the auto property will create a left margin of 25% and a right margin of 25%.

We can also use the display property to set the element to table. There is no need to specify the width in such a case if there’s some content in the table.

The width of the content is used. When we do not write any content in the inner div, we specify a certain width.

For example, create a div wiith class name outerDiv in HTML. Then, nest another innerDiv inside the outerDiv in HTML.

In CSS, set width to 100% and background to blue in the outerDiv class. Next, select the innerDiv and set the display property to table.

Set its background to red, height and width to 10vh and 10vw. Finally, set the margin to 0 auto.

Here, the 0 in the margin property is the margin for the top and bottom. The auto option is for the margin to left and right. We can center a div horizontally using CSS’s margin property.

Example Code:

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

Use Flexbox to Center a div Horizontally in CSS

We can use the flexbox properties to center a div horizontally in CSS.

Flexbox provides a straightforward way to center an element vertically and horizontally. We can create flex and define how the elements are positioned in the flexbox.

The justify-content property can be used to specify the horizontal position of the content inside the flexbox when the content does not take all of the available space. We can create a flexbox in the outer container and set the position of the inner container to the center using the justify-content property.

For example, select the innerDiv class and set the height and width properties to 10vh and 10vw. Set the color black as the background color. Next, select the outerDiv class and give the width to 100%.

Set its background color to 100%. Then, create the container a flexbox by setting the display property to flex. After it, write the option center to the justify-content property.

Therefore, we can use the CSS Flexbox to center a div horizontally in CSS.

Example Code:

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

Set the div to inline-block and Use the text-align Property to Center It Horizontally in CSS

Another method of centering a div horizontally in CSS is setting the div as an inline-block element. Just like inline, an inline-block element does not start in the new line.

However, we can set the width and height. Then, we can use the text-align property in the outer div to center the inner div horizontally.

The inner div inherits the text-align property from the outer div, and the element can be centered.

For example, set some height, width, and background to the inner div as the methods above. Then, use the display property to set the element to inline-block.

In the outer div, set its width and background. Finally, set the text-align property to center.

In this way, we can center a div horizontally in CSS.

Example Code:

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>