Html 容器中的中心浮动div

我目前正在制作一个没有使用框架的网站，但是我遇到了一个问题。我的div没有在容器中居中，即使容器本身在主体中居中

Html

当我将窗口设置为全宽时，div完全居中，但是一旦我调整了它的大小，它们就会在不居中的情况下重新组织

调整大小之前： 调整窗口大小后：

我尝试过不同的方法来解决这个问题，比如做

margin:0-10%和<代码>保证金：0.25%
说到定位，我感到困惑。
谢谢。
2解决方案：
您可以使用百分比作为
框的宽度

#content{
    width: 90%;
    height: 100%;
    margin: 0 10%;
}

.box{
    width: 30%;
    height: 150px;
    float: left;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin: 13px;
}

盒子会随着内容的变化而调整大小，但盒子里的东西在小尺寸时可能看起来很奇怪

或
您可以使用像素值作为
内容的宽度

#content{
    width: 1200px;
    height: 100%;
    margin: 0 10%;
}

.box{
    width: 400px;
    height: 150px;
    float: left;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin: 13px;
}

调整大小时，框的宽度不会改变，框中的内容也不会改变，但在小屏幕上会很痛苦。
有多种解决方案。根据这些框中的内容，这可能是最简单的一个：
text align:center
带有
display:inline block
组合；请参见此处。
只需像这样更改您的CSS，这样您就可以以多种方式调整您的框，它们将按预期对响应性布局做出反应：

#content {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    text-align:center;
    display:block;
}
.box {
    width: 45%;
    height: 150px;
    display:inline-block;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin: 13px 2%;
}


说明：

我已经删除了你的浮动，使用了块元素，并用百分比替换了你的固定大小。然后，我在容器框
#content
中使用了
text align:center
属性，因此所有内容都在容器的中心对齐。现在，如果调整大小，列将占屏幕宽度的45%，但您可以通过媒体查询明显改变行为，并对小屏幕使用类似于
.box{display:box}
的方法为方框添加自动边距

.box{
    width: 400px;
    height: 150px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin-top: 13px;
    margin-left:auto;
    margin-right:auto;
    }

我在我的机器上创建了您的文件，并且div没有居中，所以我假设您的屏幕或分辨率设置不同，或者您的内容容器位于一个或多个其他div中

无论如何，试着加上“clear:left；”在您的box类代码中，它应该可以解决您的问题（将其放在“float:left”行的正上方。祝你好运！
我正在考虑用图像填充它们，并在其上加上一个标题。如果不起作用，请立即添加小提琴上的注释css。如果不起作用，请探索其他选项。谢谢，我尝试了你的小提琴，它工作得非常完美！您好，它几乎完成了ect:）我对其进行了一些编辑以保持原始宽度（我不希望框变小）。我也很欣赏小提琴示例！
。框{宽度：400px；高度：150px；显示：内联块；边框：1px实心#c8c8c8；边框半径：3px；边距：12px 1%；}
等等，在这种情况下，将宽度保持在45%，只需添加
最小宽度：400px
哦，好的，谢谢！另外，我也非常感谢你的解释，因为我不擅长定位。很高兴你能欣赏，很多人认为这只是“给我免费代码”，而不是学习如何做：）
#content {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    text-align:center;
    display:block;
}
.box {
    width: 45%;
    height: 150px;
    display:inline-block;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin: 13px 2%;
}

.box{
    width: 400px;
    height: 150px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    margin-top: 13px;
    margin-left:auto;
    margin-right:auto;
    }