References

Beginner-friendly references for web development, with live, editable examples.

The CSS translate() function

Function CSS All modern browsers Updated
Quick answer

The CSS translate() function is a transform that shifts an element by an X and Y offset, e.g. transform: translate(10px, -4px). Because it is a transform, the move is visual only — neighboring elements do not shift — and it is GPU-accelerated, which makes it ideal for animation. translateX() and translateY() move along a single axis.

Overview

translate() moves an element horizontally and vertically. You use it inside the transform property: transform: translate(20px, 10px) shifts the element 20px right and 10px down. The single-axis variants translateX() and translateY() do one direction at a time.

Two things make it special. First, like all transforms it does not affect layout — the element moves visually but keeps its original space, so nothing around it reflows. Second, it is hardware-accelerated, so animating it stays smooth where animating top/left would stutter. Together, those make it the go-to for hover nudges and slide-in animations.

Its most famous trick is perfect centering. When a percentage is used, it is measured against the element's own size — so top: 50%; left: 50%; transform: translate(-50%, -50%) pulls the element back by half its own width and height, landing it dead center regardless of its dimensions.

Syntax

/* center an absolutely-positioned element */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Example

Live example 
<style>
  .stage { position: relative; height: 120px; background: #eef2ff; border-radius: 10px; }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1c7ce9;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font: 600 14px system-ui, sans-serif;
  }
</style>
<div class="stage">
  <div class="center">Perfectly centered</div>
</div>

Best practices

  • Animate translate() (and opacity) for smooth, GPU-friendly motion rather than animating top/left.
  • Use translate(-50%, -50%) with top/left: 50% to center an element of unknown size.
  • Remember percentage offsets are relative to the element's own dimensions, not its parent.
  • It does not affect layout, so it is safe for hover lifts and micro-interactions that should not reflow the page.

Frequently asked questions

How do I center an element with translate?
Set top: 50%; left: 50% then transform: translate(-50%, -50%). The element pulls back by half its own size, centering it exactly.
Does translate() affect the layout?
No. The element moves visually but keeps its original space, so surrounding content does not shift — which is why it is ideal for animation.
Why is translate() better than top/left for animation?
It is hardware-accelerated and does not trigger layout, so the browser can animate it smoothly. Animating top/left forces reflow and can stutter.
What is the difference between translate() and translateX()?
translate(x, y) moves on both axes; translateX() and translateY() move on one axis only.
rgb() url()