宽度自动不会居中

Question

为什么定义了自动宽度的元素在我尝试为它自动分配边距（左右）时没有居中？。除了 margins 以外，还有其他技巧可以使具有自动宽度的元素居中吗？

代码如下：

<div style="width:auto; margin:0 auto 50px;">
 <a href="#">Dummy link</a>
</div>

Answer 1

你可以给 text-align:center 给 parent div 如果有的话。

要使用 margin-auto，我们需要指定 div 的宽度。 auto 将为 div 和 p 标签占用 100% 的宽度。

如果你能找到并给出 div 的特定宽度，那么，根据你的浏览器支持，你可以使用属性 width:max-content;，阅读它 here

您可以为此使用浏览器 hack：

width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */

示例片段：

<div style="background:red;margin:auto;width:intrinsic;width:-moz-max-content;width:-webkit-max-content;">
  <a href="#">Dummy link</a>
</div>

Answer 2

将 display: inline-block 添加到您当前的 <div>，并从中删除 width:auto。然后，创建一个外部 <div>，如果您还没有，并向其添加 text-align: center。

<div style="text-align:center;">
  <div style="display:inline-block; margin:0 auto 50px;">
    <a href="#">Dummy link</a>
  </div>
</div>

JSFiddle： https://jsfiddle.net/uLp7qj3e/

宽度自动不会居中

width auto does not get centered

html

css

margins

width