How to Horizontally Center an Element in HTML and CSS

Horizontally centering an element is one of the most searched CSS tasks. Pick the method that matches your layout: block, flex, grid, or absolute.

1) Block element with known width

.box {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

2) Flexbox (most UI work)

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

Center both axes when needed with align-items: center and a min-height.

3) CSS Grid

.parent {
  display: grid;
  justify-items: center;
}

Or place a child with justify-self: center.

4) Absolute centering (special cases)

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Text vs boxes

• text-align: center centers inline content inside a block
• It does not magically center a block-level box with full width

Related CSS reads

Tables spacing: cell padding/spacing. Forms: placeholder colour.

FAQ

Why doesn’t margin auto work?
Element may be full width, floated, or not a block.

Flex or grid?
Flex for one-dimensional UI bars; grid for two-dimensional pages.

Can I center with padding hacks?
Prefer flex/grid for maintainability.

Use margin auto for fixed-width blocks, flex/grid for modern UI, and absolute translate for overlays. Match the tool to the layout.