Center a Div Horizontally with Margin Auto CSS Styling

Here to make the div horizontally centered the margin in the x-axis needs to be auto which means the margin to the left and right of the div to be the same so put it in the center. Also if you want to make the div vertically centered then make the margins in the x and y axis auto and it will put the div in the center of the parent container.

Syntax:

div {
    margin: 0 auto;
    // Add your code
}

Example: The code demonstrates how we can use the margin auto technique to center the div horizontally.

Output:

Explanation:

We utilized the browser capability by using the CSS margin property, we set the margin value to auto so the browser can adjust with the available space and place the div into the center of the viewport.

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.