Center an Element with CSS Translate

Centering with translate()

One of the most common uses of CSS translate is centering an element both horizontally and vertically inside its parent. The technique combines absolute positioning with negative translate values.

The CSS

.parent {
  position: relative;
}

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

How It Works

1. position: absolute with top: 50% and left: 50% places the element's top-left corner at the center of the parent.
2. translateX(-50%) shifts the element left by half its own width.
3. translateY(-50%) shifts it up by half its own height.

The result is that the element's center point aligns with the parent's center point, regardless of the child's dimensions.

Why Translate Over Margin?

Unlike margin: auto or negative margins, this approach works even when you don't know the element's width or height. Translate percentages are relative to the element itself, not the parent.

Performance Note

Translate transforms are GPU-accelerated in most browsers, making this technique smooth and efficient. It avoids triggering layout recalculations that would happen with margin-based centering.