div内的内容不会居中

Question

我正在尝试将内容放在div的中心。我已将其中的内容设置为block元素，并将其设置为margin: 0 auto;但文本正常显示 - 位于左上角。

JsFiddle：https://jsfiddle.net/3c6na6n4/2/

<div style="background: red; height: 300px; width: 300px;">
<div style="margin: 0 auto; display: block;">
<a style="width: 500px;" href="#>hhhhhhh</a>
</div>
</div>

Answer 1

删除额外的div，然后在外部<{p>>上设置text-align:center

<div style="background: red; height: 300px; width: 300px;text-align:center;">
<a style="width: 500px;" href="#">hhhhhhh</a>
</div>

要使margin:auto技巧发挥作用，该元素需要定义一个特定的width。