如何在RWD页面中使main区域居中且不改变其他元素布局？

你不需要给body加display:flex（这会把body下的所有子元素变成横向排列，直接打乱原有布局），也不用在main里额外添加div，用下面两种简单方法就能实现main居中：

方法1：利用margin:auto（最推荐） #

你的main已经设置了固定宽度width:1200px，只要给它设置左右margin为auto，就能让它水平居中，完全不影响其他元素的布局：

main {
  width: 1200px;
  background-color: #76a5d5;
  /* 替换原来的margin:10px */
  margin: 10px auto; 
  display: flex;
  justify-content: center;
}

方法2：如果一定要用flex布局（不推荐，没必要） #

如果坚持想用body的flex布局，需要给body设置flex-direction: column（让子元素保持垂直排列），再给main加align-self: center：

body {
  font-size: 20px;
  margin: 0px;
  display: flex;
  flex-direction: column; /* 关键：让子元素垂直排列 */
}

main {
  width: 1200px;
  background-color: #76a5d5;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-self: center; /* 单独让main水平居中 */
}

额外的响应式优化建议 #

你当前给main设置了固定width:1200px，在小屏幕上会超出视口，不符合RWD的要求。可以改成自适应宽度：

main {
  max-width: 1200px; /* 最大宽度限制为1200px */
  width: calc(100% - 20px); /* 自适应屏幕宽度，减去左右margin的10px */
  background-color: #76a5d5;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

这样在屏幕宽度小于1200px时，main会自动适配屏幕宽度，同时保持水平居中。

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