3

为了使用 CSS 使父容器中的元素居中，我总是这样做：

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

但我一直觉得这不是正确的做法；总的来说，我对利润率不太有信心。

我知道您可以使用边距position: fixed;然后left:50%; top:50%;进行计算，以便将元素定位在确切的中心......但这是一个有价值的选择吗？

我的问题是：margin: 0 auto;在页面上居中元素是一种很好的技术吗？我可以在其他方面做得更好吗？

4

3 回答 3

3

是的，margin: 0 auto;是一个很好的技术。

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

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

演示：http: //jsfiddle.net/r7EwW/

HTML

<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>

CSS

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);    
}
于 2013-04-15T10:31:17.007 回答
0

这将取决于您要实施的方案。就我个人而言，我会/一直使用width:960px; margin:0 auto;容器主体（如果这是你的问题）。

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

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

HTML

<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>

CSS

.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;
}

就我个人而言，我通常远离，position:fixed/absolute因为它们更有可能与其他方式/地方的样式发生冲突。

我认为答案是，这实际上取决于您的场景是什么，您打算在其中放入什么内容以及您对该内容了解多少。

于 2013-04-15T10:30:14.720 回答
0

我很正常margin: 0 auto，这是正确的，margin: 50%不是太好。

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

<center>
    <div style="width: 1200px; text-align: left;">
    </div>
</center>
于 2013-04-15T09:57:16.973 回答