How can I horizontally center an element?

To horizontally center an element in CSS, here are the most common and reliable methods:

1. Margin Auto (Block Elements)

Use margin: 0 auto for block-level elements with a defined width:

.center-block {
  width: 300px; /* Required */
  margin: 0 auto; /* Centers horizontally */
}

Example:

<div class="center-block">Centered Block</div>

2. Flexbox (Modern and Flexible)

Use Flexbox on the parent container:

.parent {
  display: flex;
  justify-content: center; /* Centers children horizontally */
}

Example:

<div class="parent">
  <div>Centered Child</div>
</div>

3. Grid (Modern Layout)

Use CSS Grid on the parent container:

.parent {
  display: grid;
  place-items: center; /* Centers child both horizontally and vertically */
}

Example:

<div class="parent">
  <div>Centered Child</div>
</div>

4. Text-Align (Inline/Inline-Block Elements)

Use text-align: center on the parent for inline/inline-block elements:

.parent {
  text-align: center; /* Centers inline children */
}

.inline-child {
  display: inline-block; /* Makes it work */
}

Example:

<div class="parent">
  <span class="inline-child">Centered Inline Element</span>
</div>

5. Absolute Positioning + Transform

Use for elements with position: absolute:

.centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Adjusts for element width */
}

Example:

<div style="position: relative;">
  <div class="centered">Centered Absolutely</div>
</div>

Summary of Best Use Cases

Method	Best For	Notes
Margin Auto	Block elements with fixed width	Simple, no layout changes
Flexbox	Modern layouts, dynamic content	Works for vertical centering too
Grid	Modern full-page layouts	Minimal code
Text-Align	Inline elements (e.g., text/span)	Requires parent styling
Absolute + Transform	Overlays, positioned elements	Works with unknown widths

Quick Cheat Code

For most cases, Flexbox is the easiest:

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