translate()
The translate() transform function moves an element along the X and Y axes without affecting layout.
Syntax
translate(<x>, <y>) | translateX() | translateY()Examples
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.toast { transform: translateY(100%); }
Output
Perfectly centers an absolutely positioned element and parks a toast just below the viewport edge.
Notes
Percentages are relative to the element's own size, making translate(-50%, -50%) the classic centering trick. It does not trigger layout, so it is cheap to animate. The standalone translate property also exists.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 36 |
| firefox | 16 |
| safari | 9.0 |
| edge | 12 |