css - 绝对定位图像的水平居中

Question

这是一个居中的小提琴，但图像用position:relative而不是position:absolute.

这是另一个绝对定位但不居中的小提琴。

请注意，图像具有可变宽度。

图像必须居中的原因是因为我想淡出一个，而另一个在它后面淡入。

有任何想法吗？谢谢！

Answer 1

更好的解决方案是根本不使用 CSS 位置属性。

尝试将图像显示为块元素，并告诉浏览器在左右两侧使用自动边距。

#imagesContainer img{
    display:block;
    margin:0 auto;
}

概念证明小提琴（添加边框只是为了让您可以看到图像实际上居中）：http: //jsfiddle.net/9nkDS/5/