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

Question

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;
}

Answer 1

主要内容div的CSS是：

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

看看盒子模型。宽度，填充和边距一起使得元素的总宽度大于屏幕的宽度。该元素内的白框虽然正确居中。

所以，问题不在于白框，问题是父元素。

Answer 2

将width: 100%;更改为width: 90%;，这样您就不会通过添加margin-right/left:5%来扩展页面，并将padding:15px;设置为padding: 15px 0;，因此只有顶部和底部才能填充：

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

然后：

取消课程float:left上的.step。热潮全都集中。