为什么绝对居中的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>