Horizontally Center a Div Using CSS: Flexbox approach

This approach involves the usage of one of the display properties of CSS which is flex. The parent div which will contain the child div which will be centered needs to have its display set to flex and then must have its content justified to center using the justify-content: center property.

Syntax:

parentDiv {
    display: flex;
    justify-content: center;
}
childDiv {
    // Width and height properties
}

Example: The code demonstrates how we can use the display property approach to get a div and event the content inside it to be horizontally centered in the div.

Output:

Explanation:

We used the display: flex on the parent container (.container) to create a flexible layout. The justify-content: center property centers the child <div> horizontally within the parent and adjusts the .innerDiv dimensions and styling as needed.

We are going to see how we can align a div horizontally using CSS. Centering content both vertically and horizontally is one of the most important functions that needs to be done. Here horizontally align refers to the same amount of space to the left and right of the div inside the parent div. Three approaches can be used to achieve this layout and both of them are listed and demonstrated below.

But first, Let’s create a div to place the div into the middle (horizontally) we need to create a fixed-size div and give a background color so that it can be visible. Set the main container width to 100% so the div can be moved around into the container.

Now that we have seen the structure of the code, let’s understand the different approaches to center the div horizontally.