Inhalt innerhalb div wird nicht zentriert

Question

Ich versuche, Inhalt in die Mitte eines Div. Ich habe den Inhalt darin als block Element gesetzt und setze es auf margin: 0 auto; Der Text wird jedoch normal angezeigt - in der oberen linken Ecke.

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

entfernen Sie die zusätzlichen div und stellen nur text-align:center auf dem äußeren

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

---

Für die margin:auto Trick zu arbeiten das Element muss eine spezifische width definiert haben.