Html Div应该居中，但它'；不是吗？

HTML和CSS中的所有内容看起来都很好，因此所讨论的div应该位于页面的中心。我在下面包含了一些代码片段，但真正的代码可以在这里找到：

底部的testdiv应该位于1024区域的中心，但它不是。为什么不呢

#page-wrapper {
  background-color: white;
  margin: 0 auto;
  overflow: auto;
  padding: 0;
  width: 1024px;
}

#test-div {
  background-color: orange;
  float: left;
  height: 100px;
  margin: 0 auto;
  width: 800px;
}

---

浮动：左是什么使它忽略你的保证金：0自动

您的

#test div

没有居中的原因是因为您使用的是属性

float:left。自动边距在浮动元素上不起作用

尝试删除
浮动：左属性以获得所需的结果。
将div浮动到中间“起作用”，并结合显示：内联块和文本对齐：中心。

首先，删除内部div上的float属性。然后，
Text align:center
在主外部分区上。对于内部分区，
display:inline block

刚刚测试了它-
显示：内部divs上的内联块
。也可以给它们显式的宽度

解决您的问题

检查这个
移除
浮动：左侧和添加
清除：两者都有至
#测试div

这对我来说很有效

这会解决你的问题

试试看。
根据您的小提琴，您需要将
#test div
样式调整为
float:none和
清除：两者都有

#test-div {
  background-color: orange;
  clear: both;
  float: none;
  height: 100px;
  margin: 0 auto;
  width: 800px;
}

确保您的
和
标记占据浏览器的整个宽度，并且边距和填充均为0。这导致我的内容几乎居中，但有点偏离中心。使用此CSS：

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

此外，在
#测试div
中使用：

#test-div{
    margin: 0 auto;
}

你的答案可能更能说明问题的原因以及如何改变它以获得所需的解决方案。这似乎是最有效的解决方案。令人惊讶的是，即使浮动已关闭，div仍将被定位。虽然工作，所以我很高兴。