为何Flexbox居中对齐表现异常？页面无法居中问题咨询

你的问题出在**body容器本身没有在视口中水平居中**：

• 你给body设置了固定宽度（不同屏幕尺寸下的90%/80%/60%），但margin: 0让body直接靠左对齐，没有占据视口的居中位置。
• 虽然你给body加了flex布局让内部元素在body容器里居中，但body自己没居中，所以整体看起来元素向左偏移。

修改方案 #

把body的margin: 0改成margin: 0 auto;，让body在视口中水平居中，同时保留垂直方向的margin为0。

修改后的完整CSS代码：

@media (width < 1600px) { 
  body {
     width: 80%; 
     background-color: #ee5011;
  }            
}
@media (width >= 1600px) { 
  body {
     width: 60%;
     background-color: #deaa19;
  }            
}
body {    
   width: 90%;
   margin: 0 auto; /* 关键修改：左右margin自动，实现body居中 */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
main {
   padding-left: 1em;
   padding-right: 1em;
   overflow-wrap: break-word; 
   background-color: #ffffff;
}

这样修改后，body会在视口中水平居中，内部的header和main元素也会在body容器里保持居中，整体页面就符合预期了。

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