Centering

You might say

Can you center this box both horizontally and vertically? Why is that always so hard?

Align an element to the middle of the available spaceCentering may mean horizontal alignment, vertical alignment, or both. Text can use text alignment, a fixed-width block can use automatic margins, and flexible layouts can use Flex or Grid. Start by identifying what should be centered inside which container.

Know first

Flex Grid

flex

grid

absolute

Quick checkChoose the best answer

An empty state's icon and copy change height by language, but must stay horizontally and vertically centered in the content area. What is the better approach?

Use Flex or Grid on the parent and center along both horizontal and vertical axesSet fixed top and left margins based on the current screenshotAbsolutely position the content at fixed top and left values without considering its size

You can say this to an AI Agent

Center the empty state through Flex or Grid on its parent, not screenshot-specific margins or coordinates. Ensure the container has a defined available height, then test Chinese, English, mobile width, and long copy.

When to use it

Center text inside a heading or button
Sign inSet both the main and cross axes to center.
Center a fixed-width content column
display: grid + place-items: center gets it done in two lines.
Center an empty state in a panel
Headline centered horizontallytext-align: center only handles the horizontal axis.
Align an item on both axes in a known container
margin: 0 auto centers a fixed-width block.

When NOT to use it

Use absolute offsets without knowing the container size
table-cell can center content, but flex or grid is usually more direct for new layouts.
Center long body text when left alignment is easier to read
Positioning with a fixed margin shifts when the container gets wider.
Add spaces or line breaks until something looks centered
With only left/top: 50%, the element grows down and right from the center.
Apply centering to the whole page when only one child needs it
Without a fixed width, margin: 0 auto cannot center it.

Anatomy

ElementMain axis: justify-content: centerCross axis: align-items: center

Set display: flex on the parent so it controls how its children are aligned.

The child element being centered

justify-content: center aligns the child along the main axis.

align-items: center aligns the child along the cross axis.

Variants

Flex

The most commonly used centering method in ordinary containers

Grid

It is most economical when the parent element is already grid

Absolute

It’s common in old codes, just recognize it

Typical use cases

Empty state

Dialog content

No favorites yet

Go shopping and collect your favorite components

New feature available

Write the front end like chat

Describe the effect you want and leave the rest to AI

Loading indicator

Why is centering so difficult?

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.