如何用CSS实现Flex布局居中？已尝试相关属性仍未解决

你的flex容器（.grid-container/.grid-container-2）无法居中的核心原因：

• 父容器（body）未配置子元素水平居中规则
• 容器自身没有设置自动外边距来触发居中

方案1：Flex布局实现顶部居中 #

通过给body添加flex属性，让内部容器自动水平居中，同时保持顶部对齐：

body {
  background-color: #ffffff;
  min-height: 120vh;
  margin: 0;
  overflow: hidden;
  /* 新增flex配置 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-container, .grid-container-2 {
  display: flex;
  align-items: center;
  margin: 0;
  flex-direction: row;
  height: 440px;
  width: fit-content;
  max-width: 880px;
  flex-wrap: nowrap;
  gap: 10px;
}

• display: flex将body转为flex容器
• flex-direction: column保持两个grid容器垂直排列
• align-items: center让子容器水平居中，垂直方向默认flex-start，刚好满足顶部对齐需求

方案2：Margin自动居中（非Flex方案） #

如果不想使用flex布局，只需给两个grid容器添加margin: 0 auto即可实现水平居中：

.grid-container, .grid-container-2 {
  display: flex;
  align-items: center;
  margin: 0 auto; /* 关键：左右自动外边距触发水平居中 */
  flex-direction: row;
  height: 440px;
  width: fit-content;
  max-width: 880px;
  flex-wrap: nowrap;
  gap: 10px;
}

该方法利用块级元素的margin:auto特性，让容器在父容器中自动水平居中，无需修改body布局。

当前.divONE设置了height:650px，但父容器.grid-container高度仅为440px，会导致子元素溢出容器，建议根据需求调整两者高度值，避免布局异常。

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