How to Horizontally Center a Div Element in CSS

Avatar

By squashlabs, Last Updated: October 6, 2023

How to Horizontally Center a Div Element in CSS

To horizontally center a div element in CSS, there are several approaches you can take. Here are two possible solutions:

Solution 1: Using margin: auto;

One of the simplest ways to horizontally center a div element is by using the margin property. By setting the left and right margins to “auto”, the div will automatically adjust its position to be centered within its parent container.

Here’s an example of how you can achieve this:

.center-div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

In this example, the div with the class “center-div” will have a fixed width of 300 pixels and will be horizontally centered within its parent container. Adjust the width value according to your requirements.

Related Article: How to Center an Absolutely Positioned Element in a Div

Solution 2: Using flexbox;

Another modern and widely used approach to center a div horizontally is by utilizing flexbox. Flexbox provides a flexible way to align and distribute space among elements in a container.

Here’s an example of how you can use flexbox to center a div horizontally:

.container {
  display: flex;
  justify-content: center;
}

.center-div {
  width: 300px;
}

In this example, the div with the class “center-div” will be centered horizontally within its parent container with the class “container”. The justify-content: center; property aligns the items along the horizontal axis, which results in the div being centered.

Alternative Ideas and Best Practices:

– If you want to center the div both horizontally and vertically, you can combine the above approaches with additional CSS properties. For example, you can set the parent container to have a height of 100vh (100% viewport height) and then use flexbox to center the div both horizontally and vertically.
– When working with older browsers that do not support flexbox, you can use alternative methods such as absolute positioning with a combination of left: 50% and transform: translateX(-50%) to achieve horizontal centering.
– It’s generally recommended to use flexbox for centering elements as it provides a more flexible and responsive layout compared to other techniques like using margin: auto; or absolute positioning.

Related Article: How to Vertically Align Text in a Div with CSS

More Articles from the Cascading Style Sheets (CSS) Guide series:

How to Center a Div Vertically and Horizontally on a Page

Learn the simplest method to center a div both vertically and horizontally using CSS. This article covers different techniques such as Flexbox, Absolute Positioning, and... read more

How to Vertically Center Text with CSS

This article provides a guide on vertically centering text using CSS properties and techniques. You'll learn how to achieve this using flexbox, CSS grid, and alternative... read more

How to Center a Position Absolute Element in CSS

Centering an element with position absolute in CSS can be achieved using different techniques. Two commonly used methods are using the Transform Property and Flexbox. In... read more

How to Vertically Align Text Within A Div Using CSS

This guide provides steps on how to use CSS to vertically align text within a Div. The two chapters, "Flexbox" and "CSS Table Display," offer different methods to... read more

How to Right Align Div Elements in CSS

Setting Div elements to align right in CSS can be achieved using two different properties. The first method involves using the "float" property, while the second method... read more

How to Make a Div Vertically Scrollable Using CSS

Making a div vertically scrollable in CSS can be achieved through different methods. This article provides a guide on two solutions: using the overflow property and... read more