All tools

How to Center a Div

6 ways to center, with live previews and copy-ready CSS.

Centered
Flexbox (recommended)
display: flex;
align-items: center;
justify-content: center;

Simple, modern, well-supported.

Six ways to center a div, in order of when they were popular. Flexbox or Grid is the modern answer. Absolute + translate is the classic for nested popovers and modals.

About

Pick from flexbox, CSS Grid, absolute + transform, margin auto, table-cell, or transform alone. Live preview of each. Copy the CSS you need.

How to use

  1. Pick a method.

FAQ

What's the most modern way?+

Flexbox or Grid. Both work in every modern browser. Old IE techniques (table-cell, absolute) still have edge cases where they shine - mostly when you can't change the parent's display.