Summary
The issue occurs when applying display: flex; with justify-content: center; and align-items: center; to the <body> element, causing the page content to be vertically and horizontally centered, but also introducing unexpected vertical whitespace at the top. This results in the page appearing “cut off” on larger screens.
Root Cause
- Flexbox on
<body>: The<body>element, by default, has no explicit height. Whendisplay: flex;is applied, it becomes a flex container, and its children are centered both vertically and horizontally. - Viewport Height: If the content height is less than the viewport height, the flexbox centering pushes the content down, creating empty space at the top.
Why This Happens in Real Systems
- Implicit Height: The
<body>does not inherently fill the viewport height unless specified. - Flexbox Behavior: Flexbox centers content within its container, not the viewport, leading to misalignment when the container height is undefined.
Real-World Impact
- User Experience: Content appears cut off, confusing users and degrading accessibility.
- Design Consistency: Breaks layout expectations, especially on larger screens or when scrolling.
Example or Code (if necessary and relevant)
blablabla0
blablabla1
blablabla2
blablabla3
blablabla4
blablabla5
How Senior Engineers Fix It
- Set
height: 100vh;on<body>: Ensures the body fills the viewport height, allowing flexbox to center content correctly. - Use CSS Reset: Apply a reset to normalize
<body>and<html>heights across browsers. - Alternative Layouts: Consider using
gridor absolute positioning for full-page centering without flexbox quirks.
Why Juniors Miss It
- Assumption of Default Behavior: Juniors often assume
<body>fills the viewport by default. - Overlooking Container Height: Failure to recognize that flexbox centers within the container, not the viewport.
- Lack of CSS Reset Knowledge: Unaware of the need to explicitly set heights for full-page layouts.