Quick answer

Method 1: Center a div with flexbox

Flexbox is the method most developers reach for today. You don’t style the div you want to center. You style its parent, the element that contains it. Turning the parent into a flex container gives you two properties that control where its children sit.

1. Add display: flex to the parent.
2. Add justify-content: center to center the child horizontally (along the main axis).
3. Add align-items: center to center it vertically (along the cross axis).
4. Give the parent a height, for example min-height: 100vh for a full screen. Without a height the parent is only as tall as the div, so there is no space to center in.

Edit the example below: change center to flex-end and watch the box move to the edge.

Flexbox also centers several items at once. Put three boxes in the parent and they line up side by side as a centered group. Add gap: 16px to space them out, or flex-direction: column to stack them.

Method 2: Center a div with CSS Grid

CSS Grid has the shortest version of all. place-items: center is shorthand for align-items: center plus justify-items: center, so two lines on the parent are enough:

1. Add display: grid to the parent.
2. Add place-items: center.
3. As with flexbox, give the parent a height if you want vertical centering.

Grid is a good choice when you are centering a single element, such as a login card or a “page not found” message. Flexbox is usually easier when you have a row or column of items that should stay centered together.

Method 3: Center a div horizontally with margin: 0 auto

This is the oldest trick, and it still works in every browser. A block element with a fixed width and automatic left and right margins is pushed to the middle, because the browser splits the leftover space equally between the two margins.

1. Give the div a width or max-width smaller than its parent.
2. Set margin: 0 auto (0 on top and bottom, auto on the left and right).

It only centers horizontally. Auto margins don’t center a block vertically in normal page flow. It’s the standard way to center a page’s main content column, often with max-width so the column still shrinks on phones.

Method 4: Center with position absolute and transform

Sometimes the div has to sit on top of other content, like a popup, a badge on an image, or a “play” button on a video. In that case you take it out of the normal flow with absolute positioning:

1. Give the parent position: relative, so it becomes the reference box.
2. Give the div position: absolute; top: 50%; left: 50%;. This moves its top-left corner to the middle.
3. Add transform: translate(-50%, -50%) to pull it back by half its own width and height, so its center lands in the middle.

The transform trick works without knowing the div’s size, which is why it became popular before flexbox existed. There is a newer shortcut too: position: absolute; inset: 0; margin: auto; centers an absolutely positioned element that has a set width and height.

Method 5: Center text inside a div

Often the div is already where you want it, and what you really want to center is the text inside it. That’s a different job:

• text-align: center centers text, links, images and other inline content horizontally inside the div. It does not move the div itself.
• To center a single line of text vertically, make the div a flex container with align-items: center, or set line-height equal to the div’s height (this only works for one line).

Which method should I use?

All five methods work in every current browser. Pick the one that fits the job:

If you’re unsure, use flexbox. It handles most centering problems in a way that’s easy to read later.

Common mistakes when centering a div

• No height on the parent. Vertical centering needs empty space. A parent that is exactly as tall as its child has none, so nothing seems to happen. Add min-height.
• Styling the wrong element. justify-content and align-items go on the parent, not on the div you want to move.
• margin: auto without a width. A block element is already full width, so there is no leftover space to split. Set a width or max-width.
• Expecting text-align: center to move a div. It only centers inline content inside the element.
• Using the <center> tag. It was removed from HTML5. Browsers still display it, but use CSS instead.
• Forgetting the transform. top: 50%; left: 50% alone puts the div’s corner in the middle, so it looks off-center down and to the right.

Related HTML tags

Frequently asked questions