简单Flex容器内按钮无法居中的问题排查

核心问题是body元素没有设置高度。flex布局的align-items和justify-content要生效，前提是容器有足够的可用空间。默认情况下，body的高度仅由内部内容撑开，垂直方向没有多余空间，所以按钮没法在垂直方向实现居中。

只需修改CSS，给body添加高度并清除默认边距即可解决：

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 让body占满整个视口高度 */
    margin: 0; /* 清除默认外边距，避免滚动条 */
}

.button {
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center; /* 可选：让按钮内的文字垂直居中 */
}

补充说明：

• min-height: 100vh 是关键，它让body至少占据浏览器视口的全部高度，这样垂直方向才有足够空间让align-items:center发挥作用。
• 清除body的默认外边距margin:0，可以避免页面出现不必要的滚动条。
• 如果你希望按钮内部的文字也垂直居中，给.button加上align-items:center即可。

内容的提问来源于stack exchange，提问作者Ethan