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;
}

Example

Answer 2

使用绝对值

时，必须设置top和left属性

Answer 3

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

<强> Demo

<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属性。

查看 DEMO 。

<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>

为什么位于居中相对定位div内的绝对定位元素不居中？

4 个答案: