我制作了一个CSS模板
希望它能居中显示在页面上
但是当我打开浏览器时，它总是显示在页面的左侧
请帮助我解决这个问题
5个回答
12
你需要使用指定宽度的 margin:auto，像这样：
#wrapper{
margin:auto;
width:1000px; /* adjust width */
}
在你的网页中，#wrapper应该是主要的容器元素。
- Sarfraz
2
2
要使这个居中，包装器需要设置一个固定宽度，并将左右边距设置为自动。
#wrapper {
width: 960px; /* set to width of content */
margin: 0 auto;
}
Sarfraz的想法是正确的，但没有必要将顶部和底部边距设置为auto。我们只需要影响实现所需结果的属性。
- Brian Ray
2
值得注意的是，这也会影响
＃wrapper的顶部和底部边距。 - Armand@Alison，我怀疑Maged目前没有在#wrapper的顶部或底部设置边距。 - Brian Ray
0
用户
body{
margin:0 auto;
}
or top root parent id
#parentid{
margin:0 auto;
}
- Pramendra Gupta
1
<body> 标签默认为 100% 宽度。因此，将左右边距设置为自动将毫无效果。 - Brian Ray
0
我的方法与这里已经有的略有不同，所以这是我的建议。
div#wrapper {
width: 960px;
position: absolute;
left: 50%;
margin-left: -480px;
}
其中 #wrapper 是包含网站主要内容的 div。
margin-left 应该等于你宽度的一半。
- diggersworld
6
这种解决方案与
margin-left:auto; margin-right: auto;相比有什么优势吗？ - Armand这是一个很好的垂直居中方案，但将整个包装器绝对定位并将其从标准流中移出似乎有点不必要。此外，还有更简单的解决方案，而不是使用hack方法。 - Brian Ray
回复：Brian - 如果你不想将它从流中移除，你可以使用position: relative; 然后任何跟随div的内容都会出现在应该出现的位置。这已经非常简单了，所以我不认为它是一种hack。回复：Alison - 我认为使用任何一种方式都没有优劣之分。这只是我一直以来的做法，而且它总是对我有效。 - diggersworld
@diggersworld，不想冒犯，但我觉得这个解决方案并不优雅。 - Armand
@diggersworld，这完全是不必要的。我为什么要用这么多种样式来做同一件事情呢？只需要用宽度和边距就可以了。 - Brian Ray
@Brian，你不必这样做，那只是一个替代建议。从语义上讲，他想把他的包装器放在页面的中心位置，所以我使用了position属性来突出显示。Margin是盒模型的一部分。从技术上讲，它们的工作方式不同，但在视觉上它们的效果相同。就像我说的，这只是一种替代方案。 - diggersworld
0
将左右边距设为auto，并为主体设置宽度：
body {
margin-left: auto;
margin-right: auto;
width: 780px;
}
我选择了780像素的宽度，但您可以放置任何您想要的宽度。指定其他单位（例如em，％）也应该可以正常工作。
- Armand
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
#wrapper的顶部和底部边距。 - Armand