layout

Center a Div in CSS

The definitive guide to centering elements in CSS — Flexbox, Grid, and absolute positioning methods.

Centering a div is one of the most searched CSS questions of all time. This snippet covers three modern, battle-tested approaches: Flexbox (recommended for most cases), CSS Grid, and absolute positioning with transform for fixed/absolute elements.

Live CSS Editor

CSS

Preview

Edit CSS → see live previewTab = 2 spaces

Usage Note

Apply the class to any wrapper element. Method 1 and 2 center all direct children. Method 3 requires a positioned parent and is ideal for overlays or fixed-size elements.