我知道我可以使用设置 margin: 0 auto; 将元素定位在其容器的中心
例如我可以有这样的东西:
<body>
<div id="container">
<p>SOMETHING</p>
</div>
</body>
以及相关的 CSS，将 id 为“container”的 div 放在页面的中心(在其容器的中心，即 bosy 元素):
#container {
margin: 0 auto;
width: 770px; /* Imposto la larghezza */
}
好的， 这对我来说很清楚，但我对之前的 CSS 代码有一些疑问:
1) 现在我使用的是固定尺寸模板(我以 px 为单位明确声明尺寸)，我是否也可以将此策略用于液体模板(我不以 px 为单位声明尺寸，而是以 % 为单位)或者有我有什么问题吗？
2) margin: 0 auto; 的确切含义是什么？它仅表示:“将元素定位在其容器的中心” 或者它有一些更具体的含义？
谢谢
安德里亚
最佳答案
我的网站(个人资料)使用动态(例如液体)布局，至少在宽度方面是这样(动态高度有点过大)。
要回答问题的第一部分，您当然可以在动态/流动布局中居中，并且可以使用 margin: 0 auto;。我通常使用以下内容来居中任何东西......
.center
{
margin-left: auto;
margin-right: auto;
text-align: center;
}
您在使用其他人的 CSS 时会遇到的一个问题是，我注意到很多人很多不知道如何使用 CSS1，而只是垃圾 CSS2 position即使你已经将它的一半转换回 CSS1，它也会把一切搞砸。在整个页面上的位置应该限制在不超过五六个实例，除非你正在处理一些真正的数据密集型布局，通常这是为了让 SEO 将内容保持在 (X)HTML 代码的顶部(再次喜欢我的网站)但视觉上有顶部的菜单。
我写了一个CSS1 tutorial如果您了解 CSS1，这可能会有所帮助，而这反过来可能会帮助您解决其他人的样式问题。
当您使用 margin: 0 auto;(这称为 CSS shorthand)时要回答您问题的第二部分，您实际上是在编写...
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
为了更清楚地说明另一个使用 margin: 20ox 10px; 的示例，您正在有效地编写...
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
如果您创建一个快速 HTML 文件并使用 Firefox/Firebug 打开它并查看左侧面板 HTML 选项卡/右侧面板“布局”选项卡，它将向您展示如何根据任何给定代码计算元素的测量值。
如果您有任何问题，请发表评论，我很乐意根据需要更新我的答案。
关于html - 一些 CSS 对如何使用 margin : 0 auto; in a template 居中元素的疑问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17404361/