Html 将网页中的元素居中-页边距0自动或左50%？

为了使用CSS将元素集中在父容器中，我总是这样做：

div.element-to-center { width: ...; margin: 0 auto; }

但我总觉得这不是正确的方法；总体而言，我对利润率不太有信心

我知道你可以选择

位置：fixed和<代码>左侧：50%；最高：50%然后使用边距进行计算，以便将元素定位在准确的中心。。。
但这是一个有价值的选择吗

我的问题是：
margin:0auto在页面上居中放置元素的好方法？我能在其他方面做得更好吗？
我在做
margin:0 auto
这是正确的，
margin:50%
不太好

您也可以尝试类似的方法，这也是正确的：

<center>
    <div style="width: 1200px; text-align: left;">
    </div>
</center>

这将取决于您想要实施的场景。就我个人而言，我会/一直使用
宽度：960px；保证金：0自动（如果这是您的问题）

如果您想在主容器中嵌入div，您必须考虑您知道它将包含什么。如果您可以保证内容的大小，那么您可以使用宽度/边距方法，但我发现有时我并不总是知道要限制容器的大小，在这种情况下，我只需设置
宽度：100%；边缘：0 1米
在容器的每一侧给我一个边距

我最近在制作梦幻足球队布局时使用的一种方法，其中多个项目都集中对齐，如下所示：

HTML

就个人而言，我通常远离
位置：固定/绝对
，因为它们更可能在其他方面/地方与样式冲突

我认为答案是，这实际上取决于你的场景是什么，你打算在其中放什么内容，以及你对这些内容了解多少是一种很好的技术

Left:50%
需要一个非静态位置，并且它不居中，因为它从总宽度的50%开始分割，而不考虑分割本身的长度

要正确使用Left，您应该（知道并）使用
CSS3 Calc将div宽度的一半减去该值：

演示：

HTML

但是位置：固定将使容器相对于浏览器窗口定位。即使滚动窗口，它也不会移动是的，我刚刚意识到。非常感谢。我不喜欢混淆内容和样式，我喜欢保持我的HTML源代码从
center
标签和类似的东西中保持干净。。。
<div class="squad">
    <div>GK</div>
    <br/>
    <div>DF</div>
    <div>DF</div>
    <div>DF</div>
    <div>DF</div>
    <br/>
    <div>MF</div>
    <div>MF</div>
    <div>MF</div>
    <br/>
    <div>ST</div>
    <div>ST</div>
    <div>ST</div>
</div>

.squad {
    width: 320px;
    font-size:0;
    text-align: center;
}

.squad div {
    font-size: 16px;
    display: inline-block;
    width: 40px;
    background-color:red;
    margin:1px 5px;
    text-align:center;
}

<div class="auto">Div with margin: 0 auto;</div>
<div class="percentage">Div with Left: 50%;</div>
<div class="percentageDynamic">Div with Left: (50% - half of div's width) </div>

div.auto {
    width: 100px;
    border: 1px solid green;
    margin: 0 auto;    
}

div.percentage {
    width: 100px;
    border: 1px solid red;
    position: relative;
    left: 50%;    
}


div.percentageDynamic {
    width: 100px;
    border: 1px solid green;
    position: relative;
    left: calc(50% - 50px);    
}