卡在中间

Question

我应该何时使用margin-left:auto; margin-right:auto居中，何时应该使用margin-left:50%; margin-right:50%？

当我在另一个元素中包含的内容时，可能是“自动”当我以页面为中心时，50％？

或者我只是无可救药地混淆了？

Answer 1

margin-left:50% ; margin-right:50%;意味着您居中的项目没有宽度。

对于像div这样的块级元素，最好的中心方法是：

div.centered { margin: 0 auto; }

自动前的0表示顶部和底部，因此可以设置为您喜欢的任何内容。重要的部分是auto，它将导致左右边距自动设置，无论元素的宽度如何，它们都是相等的。

更新：正如Phelios所指出的，应为div指定宽度以使这种方法起作用

Answer 2

  

或者我只是无可救药地混淆了？

也许:)。

• margin-left: 50%; margin-right: 50%通常不常用：http://jsfiddle.net/VcDYr/
• 您可以使用margin-left: 50%的位置，如果您像这样居中：http://jsfiddle.net/VcDYr/1/
• 要“居中页面”，您总是想要margin-left: auto; margin-right: auto。更简单的方法是margin: 0 auto：http://jsfiddle.net/VcDYr/2/

考虑div是一个块级元素。

请参阅：http://www.w3.org/TR/CSS21/box.html#margin-properties

  

auto - 请参阅有关计算的部分   行为的宽度和边距。

导致：http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins

  

中的块级，未替换元素   正常流量

     

'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=包含的宽度块

     

如果'margin-left'和'margin-right'都是'auto'，则它们的使用值相等。这使元素相对于包含块的边缘水平居中。

Answer 3

要将div容器居中，您需要给它一个宽度和高度，而不是使用

#div {
   height: 700px;
   width: 1000px;
   margin: 0 auto;
}