css - 已绝对定位的居中图像

Question

所以我正在使用 this pure CSS sliding gallery没有过渡效果，到目前为止效果非常好。

但是，并非我所有的图像都具有相同的尺寸!这不会是一个问题，除了所有的全 View 图像似乎都向左对齐，如果它们居中看起来会更好。

我试过将边距设置为自动，并尝试将其全部放在另一个居中的容器中，但它似乎不起作用。我认为这与全景图像的位置设置为绝对位置有关。

有人有什么建议吗？编辑:这是我现在正在使用的，它在 Jfiddle 中。

HTML:

    <div class="imagescontainer">    
<div id="images"><br />
<a href="images/large_lioxposter1.png" target="_blank"><img src="http://img19.imageshack.us/img19/6471/6eor.png" alt="Liox Poster 1" name="image1" id="image1"  /></a>
<img id="image2" src="http://img89.imageshack.us/img89/8955/ha1e.png" />
<img id="image3" src="http://img812.imageshack.us/img812/6363/1k48.png" />
<img id="image4" src="http://img577.imageshack.us/img577/5867/a26z.png" /></div></div>
<center>
<div id="slider">
<a href="#image1"><img src="images/mini_lioxposter1.png" alt="LIOX Poster"/></a>
<a href="#image2"><img src="images/mini_lioxposter2.png" alt="LIOX dimensions" /></a>
<a href="#image3"><img src="images/mini_lioxposter3.png" alt="Technical drawings" /></a>
<a href="#image4"><img src="images/mini_lioxposter4.png" alt="Technical drawings" /></a></div></center>

 </div>

CSS:

.imagescontainer
{
margin-left:auto;
margin-right:auto;
border-style:dotted;
text-align:center;
}
#images {
height: 270px;
overflow: hidden;
position: relative;
margin: 5px auto;
}

#images img {

height: 250px;
padding-top:10px;
position: absolute;
top: 0;
left: -600px;
z-index: 1;
opacity: 0;
}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}

#images img:first-child {

opacity: 1;
}

#images:hover

{
opacity:0.5;
}

谢谢!

Answer 1

简单地使用这个简单的技巧，它将垂直和水平居中:

#images img {
  top:50%;
  left: 50%;
  width: 440px;
  margin-top: -125px; /* Half the height */
  margin-left: -220px; /* Half the width */
  height: 250px;
  position: absolute;
  z-index: 1;
  opacity: 0;
}

看看:http://jsfiddle.net/CPsmg/1/

另请参阅引用资料:http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/