How to Center a Div Horizontally and Vertically with CSS Flexbox

Centering a div used to be one of the most frustrating jobs in web design. Developers tried margins, tables, absolute positioning and lots of guesswork, and the result still broke when the screen size changed. If you have ever placed a login box, a card or a message in the middle of a page and watched it sit in the wrong spot, you know this problem well.

The good news is that CSS Flexbox solved it in a clean and reliable way. With just three lines on the parent container, you can center any child element both horizontally and vertically, and it will stay centered on phones, tablets and large monitors. This guide walks you through the exact method, why it works, and how to adapt it for real projects.

Quick Answer

To center a div horizontally and vertically with Flexbox, set the parent container to display: flex;, then add justify-content: center; for horizontal centering and align-items: center; for vertical centering. Also give the parent a height, such as height: 100vh;, so it has vertical space to center inside. The child div will sit exactly in the middle without any extra margins or positioning.

Understanding How Flexbox Centering Works

Flexbox is a layout system that works on a parent and its children. You do not style the centered div itself to move it into place. Instead, you turn its parent into a flex container, and the parent controls where the child sits. This is the most important idea to remember, because most beginner mistakes happen when the flex properties are added to the wrong element.

When you add display: flex; to a container, its direct children become flex items laid out in a row by default. Two properties then control alignment. The justify-content property controls spacing along the main axis, which is horizontal in the default row direction. The align-items property controls alignment along the cross axis, which is vertical in a row layout. Setting both to center places the item in the exact middle on both axes.

There is one more requirement that catches many people out: vertical centering only looks correct if the container actually has height. If the parent is only as tall as its content, there is no empty space above and below, so centering appears to do nothing vertically. That is why the examples below give the parent a clear height, often the full height of the browser window.

Step-by-Step: Center a Div With Flexbox

Follow these steps to build a simple centered layout from scratch. You can use the same pattern for a single card, a hero section message, or a full-page loading screen.

1. Create your HTML structure. Make a parent wrapper and place the div you want to center inside it, for example <div class="wrapper"><div class="box">Hello</div></div>.
2. Turn the parent into a flex container. In your CSS, target the wrapper and add display: flex; so its child becomes a flex item.
3. Center horizontally. Add justify-content: center; to the same wrapper rule. This pushes the child to the middle of the row.
4. Center vertically. Add align-items: center; to the wrapper. This aligns the child in the middle of the cross axis.
5. Give the parent height. Add height: 100vh; if you want centering inside the full screen, or a fixed value such as height: 400px; for a section. Without height, vertical centering has no visible effect.
6. Remove default body spacing if needed. Browsers add a small margin around the page. Adding margin: 0; to the body selector often makes full-screen centering look truly centered.
7. Test and resize the window. Open the page and shrink and enlarge the browser. A correct Flexbox setup keeps the box centered at every size without extra code.

Here is a complete working example you can copy and test:

.wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; }

.box { background: #1e40af; color: white; padding: 30px; border-radius: 10px; }

In this example, the wrapper covers the full viewport height, and the blue box always stays in the center. You can change the box content to a form, an image or a heading and the layout will still work.

Centering Multiple Items Together

Sometimes you want to center a group rather than a single box, for example a heading, a paragraph and a button stacked in the middle of a hero section. Flexbox handles this easily. Keep the same parent rules, and add flex-direction: column; so the items stack vertically. Then wrap the items in one inner container if you want them treated as a single centered block, or let them stack and use gap: 16px; to add even spacing between them.

Remember that with flex-direction: column;, the axes swap: justify-content controls vertical alignment and align-items controls horizontal alignment. Both set to center still gives a perfectly centered result.

Useful Variations for Real Projects

Once you know the basic method, you can adjust it for everyday layouts.

• Center only horizontally: Use display: flex; and justify-content: center; and leave out align-items. The item stays at the top but sits in the middle sideways.
• Center only vertically: Use display: flex; and align-items: center; with a set height on the parent. The item stays on the left but sits in the middle vertically.
• Center a full-screen message: Use height: 100vh; on the parent, which is ideal for coming soon pages, maintenance messages and centered login forms.
• Center inside a small section: Replace 100vh with the section height, such as min-height: 350px;, so the content centers inside that band only.
• Add spacing around the box: Use padding on the parent so the centered box never touches the screen edges on small phones.

If you are comparing layout systems for larger page designs, our complete CSS Flexbox vs Grid beginners guide explains when Flexbox is the better choice and when Grid handles the job more neatly.

Why Your Div Might Still Not Be Centered

If you followed the steps and the div is still off-center, work through this short checklist before changing random values. Almost every failed attempt comes down to one of these causes.

1. Flex properties are on the child, not the parent. Move display: flex;, justify-content and align-items to the direct parent of the element you want to center.
2. The parent has no height. Add a height or minimum height and test again. This is the single most common reason vertical centering appears broken.
3. There is an extra wrapper in between. Flexbox only affects direct children. If an unseen div sits between your container and your box, the centering stops at that wrapper.
4. A margin is pushing the box. Check for large margins on the child or the parent, and check the default body margin as well.
5. Another rule is overriding yours. A later CSS rule or a framework class may set a different display or alignment value. Inspect the element in browser developer tools to see which rules are actually applied.

The official MDN guide to aligning items in a flex container shows how each alignment value behaves with clear diagrams. The MDN box alignment in Flexbox reference is also useful when you move beyond simple centering into more advanced spacing.

Common Mistakes and Helpful Tips

Beginners often add margin: auto; and Flexbox rules at the same time and then wonder which one is doing the work. Pick one method per layout. For Flexbox centering, let the parent handle the position and keep the child margin simple. Mixing methods makes debugging harder and the layout less predictable.

Another common mistake is using height: 100%; without checking the parents above it. Percentage heights only work when every parent up to the page also has a defined height. If your percentage approach fails, 100vh is usually the simpler and more reliable choice for full-screen centering.

A helpful tip is to give your wrapper and box temporary bright background colors while you build the layout. Seeing the exact size of the parent makes it obvious whether the problem is height, an extra wrapper or alignment. Remove the test colors once the layout looks right, and test on a phone or responsive view using max-width and padding to stay safe on small devices.

Conclusion

Centering a div with Flexbox is a three-property job: make the parent a flex container, center on the main axis with justify-content: center;, and center on the cross axis with align-items: center;. Add a real height to the parent, usually 100vh for a full page, and the child stays in the middle at every screen size. Once this pattern becomes habit, you can reuse it for cards, hero sections, forms and messages across all of your projects with confidence.

Frequently Asked Questions

Do I put the Flexbox properties on the div I want to center?

No. The properties go on the parent container of that div. The parent becomes the flex container, and the div you want to center becomes the flex item that the parent positions in the middle.

Why is my div centered horizontally but not vertically?

This almost always means the parent has no extra height. If the parent is only as tall as the content, there is no space to center in. Add height: 100vh; or a min-height value to the parent and check again.

Can I center more than one element at the same time?

Yes. Wrap the elements in a single inner container and center that container, or use flex-direction: column; with a gap to stack several items in the center as a neat group.

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis, which is horizontal by default, while align-items aligns them along the cross axis, which is vertical by default. Setting both to center centers the item in both directions.

Does Flexbox centering work on mobile screens?

Yes, it works on all modern phones and browsers. Use max-width and padding on the centered box so long content does not overflow on narrow screens, and your layout will stay centered everywhere.