flex布局中align-items:center不生效问题求助

问题原因 #

body元素的默认高度仅由内部内容撑开，垂直方向没有足够空间让align-items:center发挥作用；而水平方向浏览器默认给body分配全屏宽度，因此justify-content:center能正常生效。

修复代码 #

有两种常用的修复方式：

方式1：给html和body设置100%高度

html, body {
    height: 100%;
    margin: 0; /* 清除浏览器默认边距，避免出现空隙或滚动条 */
}

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
}

方式2：用min-height:100vh直接设置body高度

body {
    background-color: #927df1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 让body高度至少占满整个视口 */
    margin: 0; /* 清除浏览器默认边距 */
}

补充说明 #

• 使用min-height:100vh而非height:100%的好处是：当页面内容超过视口高度时，body会自动扩展高度，不会出现内容被截断的问题。
• 必须清除body的默认margin，否则浏览器自带的边距会导致布局出现意外的空隙或滚动条。

内容的提问来源于stack exchange，提问作者지수박