Question

我搜索过并搜索过。摆弄和调整。花了不少时间尝试不同的建议和代码创意...

如何在网页上显示内容，以浏览器视图端口为中心。无论我做什么，我总是以不均匀的边缘结束，而且非常明显。

目前最接近的是：

＆＃13;

#MyStyleName
{
    margin: 0 auto;
    width: 90%;
}

＆＃13;

但是，因为我使用的是百分比，无论我使用边距/对齐方式，它都默认为位于页面的左边缘。

额外信息：我的问题涉及顶级，最外层的元素。第一个或那个包含其他一切的内容。

Answer 1

我不确定你在问什么，但这里有一个af为中心<div>的例子，其中有一个百分比。

我还添加了border-sizing: border-box，这使您可以使用填充。

#MyStyleName {
  margin: 0 auto;
  width: 90%;
  display:block;
  background:red; /* Only for testing */
  box-sizing:border-box;
  padding: 10px;
}

<div id="MyStyleName">
  Hi!
</div>

Answer 2

如果您的#MyStyleName是一个块元素，那么它应该有效。如果没有，那就不行了。在这种情况下，您可以将display:block;添加到选择器样式。

以动态宽度为中心的主包装器

2 个答案: