如何将绝对定位图像居中对齐？答案

【问题标题】：How can i align absolute-positioning images in center?如何将绝对定位图像居中对齐？
【发布时间】：2011-08-19 23:00:44
【问题描述】：

我有一个 position:relative 的 div。在该 div 中，我已经放置了带有 position:absolute 的图像，因为我将有一个带有淡入和淡出的幻灯片，并且图像必须绝对定位。

我想对齐居中的绝对定位图像他们的父 div。这个可以吗？？因为在 css 部分我已经定义了所有的图像是

left:0px;

我的编码如下：

<html>
<head>
<style type="text/css">

div img{

    border:1px solid blue;
    position:absolute;
    left:0px;
    top:0px;
}
</style>
</head>

<body>
<div style="border:2px solid red;position:relative;width:500px;height:300px;">

    <img src="01.JPG" width="403" height="300"/>    
    <img src="02.JPG" width="403" height="300"/>
    <img src="03.jpg" width="170" height="290"/> <!-- this is a portrait,BIG problem         here!!! --> <!-- The image is positioned left -->
</div>

</body>
</html>

谢谢，提前！

【问题讨论】：

标签： html css css-position

【解决方案1】：

设置：

left:50%; margin-left:-<image width/2>px

所以在这种情况下，对于第三张图片：

left:50%; margin-left:-85px

见：http://jsbin.com/ufiqum

【讨论】：

感谢代码，所以我必须使用 jquery 来获取图像的 .width() ，然后计算左侧定位，对吗？或者有没有其他方法来实现它？你是如何在你的编码中计算出来的？
我将图像宽度除以 2。我发现这并不完全清楚，所以我更新了我的答案。是的，你需要 JavaScript/jQuery 来计算这个。

【解决方案2】：

你需要自己计算位置。

left = 中心位置 - 图片宽度的 1/2

【讨论】：

感谢您的回答，我如何获得“中心位置”的值？？
center = 包含元素宽度的 1/2。