html - 网页中的居中元素 - margin 0 auto 或 left 50%？

Question

为了使用 CSS 将元素居中放置在父容器中，我总是这样做:

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

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

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

我的问题是:margin: 0 auto; 是一种将元素居中放置在页面上的好方法吗？我可以在其他方面做得更好吗？

Answer 1

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

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

要正确使用 Left，您应该(知道并)使用 CSS3 Calc 减去 div 宽度的一半:

演示: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);    
}