Html Div没有正确居中，为什么？

explainmehow.com

屏幕中间的白色框，其中有文本，它们不居中。如果你把屏幕弄得很小，你可以看得更清楚

白盒：

.step {
  background-color: white;
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 20px;
  color: #303030;
  display: block;
  float: left;
}

---

主要内容div的CSS如下所示：

看看盒子模型。宽度、填充和边距加在一起使元素的总宽度大于屏幕的宽度。但该元素中的白色框正确居中

因此，问题不在于白框，而在于父元素。

更改宽度：100%；宽度：90%；因此，您没有通过添加页边距right/left:5%和设置padding:15px来扩展页面；到填充：15px 0；因此，只有顶部和底部得到填充：

#contentholder {
    background-color: #eeeeee;
    margin-left: 5%;
    margin-right: 5%;
    min-height: calc(100vh - 210px);
    width: 90%;
}

然后：

摆脱浮子：留在课堂上。走一步。砰，一切都在中心

---

请在这里张贴您的相关标记。删除左侧浮动会使情况更糟

#contentholder {
    background-color: #eeeeee;
    margin-left: 5%;
    margin-right: 5%;
    min-height: calc(100vh - 210px);
    width: 90%;
}