為什么絕對居中的div相對居中的絕對居中的元素不居中？

Question

我不明白為什么下面的代碼不能使圖像居中。 你能幫助我嗎？

<div align="center" style="position:relative;">
  <div style="position: absolute">
    <img src="a.png"/>
  </div>
</div>

Answer 1

你需要使用自動邊距和設置left和right ，如果要居中絕對定位的元素值。

#absolute-element{
    left: 0;
    right: 0;
    margin: 0 auto;
}

例

Answer 2

使用絕對值時必須設置top和left屬性

Answer 3

要使圖像水平和垂直居中，請添加left:0; right:0; top:0; bottom:0; margin: auto; left:0; right:0; top:0; bottom:0; margin: auto;

演示版

<div style="position:relative; height: 100%; background: #eee;">
  <div >
    <img style="position: absolute; left:0; right:0; top:0; bottom:0; margin: auto;" src="http://placehold.it/350x150"/>
  </div>
</div>

Answer 4

如果要水平居中，則必須定義left和right屬性。

看看演示 。

<div style="position:relative; border-top:1px solid red;">
  <div style="position: absolute; left:50%; right:50%;">
    <img src="http://placehold.it/100x100" />
  </div>
</div>