iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To center a div horizontally and vertically with Flexbox, make its parent a flex container and center items on both axes:
.container {
display: flex;
justify-content: center;
align-items: center;
}In the default row direction, justify-content centers the child horizontally and align-items centers it vertically. The parent also needs enough height for vertical centering to be visible.
Set up the flex container
Flexbox alignment is controlled by the parent, not by the child being centered. Apply display: flex, justify-content: center, and align-items: center to the parent container. The same rules can center one child or arrange multiple flex items as a centered group. MDN’s centering example uses this pattern.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
.container {
display: flex;
justify-content: center;
align-items: center;
}Give the parent room for vertical centering
Vertical centering can only be seen when the parent has space along the vertical axis. If its height is determined entirely by the child’s content, there may be no extra space in which to center that child.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For example, to center content in a container at least as tall as the viewport, add min-height: 100vh:
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}This is a layout choice for a viewport-height design, not a requirement of Flexbox itself. An explicit height or another layout rule that creates vertical space can also make the alignment visible. MDN’s centering walkthrough demonstrates the need for space in the container.
Understand which direction each property controls
justify-content aligns items along the flex container’s main axis; align-items aligns them along its cross axis. The axes depend on flex-direction, rather than always meaning horizontal and vertical. MDN’s guide to alignment in a flex container explains how these properties work together.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches| Flex direction | Main axis | Cross axis | Effect of the centering rules |
|---|---|---|---|
row (default) |
Horizontal | Vertical | justify-content: center centers horizontally; align-items: center centers vertically. |
column |
Vertical | Horizontal | justify-content: center centers vertically; align-items: center centers horizontally. |
In a column layout, for example, the same declarations still center on both axes, but each property’s physical direction swaps. For an overview of the axes and direction, see MDN’s Flexbox basic concepts.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Center one item differently from the rest
If one child should be aligned differently from the other items on the cross axis, set align-self on that child:
.special-item {
align-self: center;
}Main-axis distribution is handled for the flex items as a group. justify-self is not the way to position an individual flex item along that axis. For more on the available alignment behavior, see MDN’s box alignment guide for Flexbox.
Avoid the justify-items mistake
justify-items: center does not center a flex item: that property is ignored for Flexbox. Use justify-content: center for the main axis and align-items: center for the cross axis. MDN covers the distinction in its Flexbox learning guide.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
