CSS默认display:block导致容器Div无法居中的问题求助

首先澄清一个误区：div元素默认就是display:block，这不是阻碍你居中的原因，不用在这个点上纠结。

你的代码里#main-container设置了margin: 0 auto，这是块级元素水平居中的标准写法，但没生效的原因有两个：

1. align-items:center无效且多余：这个属性是Flex容器的专属属性，当前你的容器没有设置display:flex，所以这个属性根本起不到任何作用，反而可能让你误以为是布局属性冲突。
2. 浏览器默认样式干扰：body元素默认带有margin（比如Chrome里是margin:8px），这会让容器的居中效果被抵消，看起来像是没居中。

修正方案1：仅实现水平居中（保留块级布局） #

重置body的默认边距，同时移除无效的align-items:center：

body {
  margin: 0;
  padding: 0;
}

#main-container {
  max-width: 980px;
  margin: 0 auto;
}

修正方案2：实现水平+垂直居中（使用Flex布局） #

如果需要让容器在页面中同时垂直和水平居中，可以给父元素（body）启用Flex布局：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 让body占满整个视口高度 */
  display: flex;
  justify-content: center; /* 水平居中子元素 */
  align-items: center; /* 垂直居中子元素 */
}

#main-container {
  max-width: 980px;
  width: 100%; /* 确保容器宽度不超过max-width，同时适应内容 */
}

测试这两种方案，你的容器应该能正常居中了。

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