设置Flexbox后无法将绿色容器居中页面，求问题原因及解决方法

你的绿色容器没居中，核心问题出在body的高度设置以及flex布局的垂直居中配置上：

1. 高度未占满整个视口 #

你给.body设置了height: 100%，但这个百分比是相对于父元素（<html>）的高度，而<html>默认没有设置高度，导致.body的高度实际上只等于内容的高度，而非整个浏览器视口的高度。这样flex布局的垂直居中效果自然无法体现。

2. 缺少垂直居中的flex配置 #

你当前只设置了align-items: center（实现水平居中），如果需要让容器在垂直方向也居中，还需要添加justify-content: center属性。

修正后的CSS代码 #

/* 先给html和body都设置高度，确保占满视口 */
html, .body{
    margin: 0; /* 去掉默认边距，避免出现滚动条或留白 */
    padding: 0;
    background-color: black;
    display: flex;
    width: 100%;
    height: 100vh; /* 使用vh单位直接占满视口高度，比%更可靠 */
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 添加这个实现垂直居中 */
}

.container div {
    border: solid red;
    padding: 0;
}

.container{
    background-color: green;
    display: flex;
    justify-content: space-around;
    /* 可以给容器设置一个宽度，避免它默认占满整个视口宽度 */
    width: 80%;
}

如果只需要水平居中，不需要垂直居中，那只需要修正html和body的高度，同时确保.container的宽度不是100%（否则看起来和没居中一样），比如给.container设置一个固定宽度或百分比宽度即可。

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