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.
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 buttonSign inSet both the main and cross axes to center.
- Center a fixed-width content columndisplay: grid + place-items: center gets it done in two lines.
- Center an empty state in a panelHeadline centered horizontallytext-align: center only handles the horizontal axis.
- Align an item on both axes in a known containermargin: 0 auto centers a fixed-width block.
When NOT to use it
- Use absolute offsets without knowing the container sizetable-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 readPositioning with a fixed margin shifts when the container gets wider.
- Add spaces or line breaks until something looks centeredWith only left/top: 50%, the element grows down and right from the center.
- Apply centering to the whole page when only one child needs itWithout 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
Login Vibe
Dialog content
No favorites yet
Go shopping and collect your favorite components
Login panel
New feature available
Write the front end like chat
Describe the effect you want and leave the rest to AI
Loading indicator
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check