Centering Techniques

Centering Techniques in CSS: How to Center Anything

Focus keyword: how to center a div in CSS. Centering is the most searched CSS question in the world. The good news: modern CSS makes it easy. In this lesson you will learn horizontal, vertical and perfect centering with text-align, margin auto, flexbox, grid, absolute positioning and more, and you will learn which method to choose for each situation.

Trending keywords covered in this lesson

center a div horizontally and vertically, margin auto, flexbox center, grid place-items center, place-content center, text-align center, vertical-align middle, absolute center transform, inset 0 margin auto, align-self, justify-self, min-height 100dvh, center text vertically, center image, center button, CSS centering cheat sheet.

1. Quick Decision Guide

• Center text or inline content: text-align: center.
• Center a block horizontally: margin-inline: auto with a width.
• Center anything both ways: display: grid; place-items: center.
• Center items in a row or column: flexbox with justify-content and align-items.
• Center an overlay inside a positioned parent: position: absolute; inset: 0; margin: auto.

2. Horizontal Centering

Inline content: text-align

text-align: center on the parent centers text, inline, inline-block and inline-flex children. It does not center a block element.

Block elements: margin auto

A block with a set width (or max-width, or width: fit-content) is centered with margin-inline: auto (same as margin: 0 auto). This is the standard way to center a page container.

3. Vertical Centering

• Single line of text: set line-height equal to the container height.
• Inline-block: vertical-align: middle on the items.
• Flexbox: display: flex; align-items: center.
• Grid: align-items: center or place-items: center.
• Block layout (new): align-content: center now works on normal block containers in modern browsers.

Note that margin: auto does not center vertically in normal block flow because auto vertical margins compute to 0. It works in flex and grid, and in absolute positioning with inset.

4. Perfect Centering (Both Axes)

Method 1: Grid (shortest)

display: grid; place-items: center; centers every child. place-content: center centers the whole grid tracks. For one child this is the shortest and most reliable method.

Method 2: Flexbox

display: flex; justify-content: center; align-items: center;. Use flex-direction: column to stack items while centering. Remember that justify-content follows the main axis and align-items follows the cross axis.

Method 3: Margin auto in flex

Inside a flex container, margin: auto on the child absorbs all free space in both directions and centers it. You can also use margin-left: auto to push one item to the far side, a common navigation trick.

Method 4: Absolute with inset and margin auto

Give the child a width and height, then position: absolute; inset: 0; margin: auto; inside a positioned parent.

Method 5: Absolute with transform

The classic trick: top: 50%; left: 50%; transform: translate(-50%, -50%). It works without knowing the size, but transforms can blur text on some screens and create a stacking context.

5. Full Page Centering

To center in the whole viewport use min-height: 100dvh on the container (dvh handles mobile browser bars better than vh) together with grid or flex centering. Use min-height and not height so content can grow without overflow.

6. Centering Images and Media

Images are inline by default, so the parent can center them with text-align. If you set display: block on the image, use margin-inline: auto. For videos and iframes, wrap them in a container and center the container.

7. Centering the Last Row in a Wrapped Flex Layout

justify-content: center with flex-wrap: wrap centers each row, including a short last row. If you need aligned columns instead, use grid with repeat(auto-fit, minmax(200px, 1fr)).

8. Safe Alignment

When a centered item is larger than its container, centering can push content out of the visible area where it cannot be scrolled to. Use align-items: safe center so the item aligns to the start when there is not enough room.

9. Accessibility and Readability

• Do not center long paragraphs. Centered text is hard to read beyond two or three lines.
• Keep left alignment for body copy in left-to-right languages.
• Use logical properties (margin-inline, place-items) so layouts work for right-to-left languages.

10. Common Mistakes

• Using text-align: center on a block and expecting the block to move.
• Using margin: 0 auto on an element with no width (it already fills the row).
• Using margin: auto for vertical centering in normal flow.
• Forgetting position: relative on the parent of an absolutely centered child.
• Using height: 100vh on mobile and getting cut-off content.

Key Takeaways

Remember three patterns: text-align for inline content, margin-inline auto for blocks, and grid place-items center for perfect centering. Use flexbox for rows and columns, and absolute centering only for overlays.