图片居中

代码如下：#div_img {
width:243px;
height:200px;
}
<div   style="background-color:#666;" id="div_img" >    <img class="change" id="1"   width="243" height="182.25"   src="../../001/images/tpqh/Blue hills.jpg" />
    <img class="change" id="2"   width="200" height="200"   src="../../001/images/tpqh/Sunset.jpg" />
    <img class="change" id="4"   width="243" height="182.25"   src="../../001/images/tpqh/Winter.jpg" />
      </div>
要求每张图片（图片尺寸任意，但是都小于外部div）都在外围div中垂直居中对齐（图片实际上是重叠的），
应该如何修改代码？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用center 标签可以实现居中。
至于重叠，不会。<style>
#div_img {
    width:243;
    height:200px;
border:1px solid red;
    }</style>
<div   style="background-color:#666;" id="div_img" >
<center>
    <img class="change" id="1"   width="243" height="182.25"   src="../../001/images/tpqh/Blue hills.jpg" />
    <img class="change" id="2"   width="200" height="200"   src="../../001/images/tpqh/Sunset.jpg" />
    <img class="change" id="4"   width="243" height="182.25"   src="../../001/images/tpqh/Winter.jpg" />
</center>
</div>
重叠是指每张图片都在外围div中垂直居中，注意是垂直居中
<style>
#div_img {
    width:243;
    height:200px;
border:1px solid red;
    }
#div_img img { position:absolute; }</style>
<div   style="background-color:#666;" id="div_img" >    <img class="change" align="1"  title="图片1"   width="243" height="182.25"   />
  <img class="change" align="1"  title="图片1"   width="243" height="182.25"   />
    <img class="change" align="1"  title="图片1"   width="243" height="182.25"   />

</div>用absolute 可以绝对定位，但不知道如何去居中
#div_img {
    width:243px;
    height:200px;
    }
#out{ text-align:center}
<div id="out">
<div   style="background-color:#666;" id="div_img" >    <img class="change" id="1"   width="243" height="182.25"   src="../../001/images/tpqh/Blue hills.jpg" />
    <img class="change" id="2"   width="200" height="200"   src="../../001/images/tpqh/Sunset.jpg" />
    <img class="change" id="4"   width="243" height="182.25"   src="../../001/images/tpqh/Winter.jpg" />
      </div>
  </div>
给外层再加个div
<style>
#div_img {
    width:243px;
    height:200px;
    line-height:200px;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    }
#container{ text-align: center;}
</style>
<div id="container">
<div   style="background-color:#666;" id="div_img" >
<img class="change" id="1"   width="243" height="182.25"   src="../../001/images/tpqh/Blue hills.jpg" />
    <img class="change" id="2"   width="200" height="200"   src="../../001/images/tpqh/Sunset.jpg" />
    <img class="change" id="4"   width="243" height="182.25"   src="../../001/images/tpqh/Winter.jpg" />
</div>
</div>注意保持div中的内容垂直居中需要div的行高和自身高度一致height:200px; line-height:200px;
style="position:absolute;z-index:1"
要使图片重叠的话,要用z-index:1,值越大的在上方;
重叠使用z-index值啊，
要居中使用center
也可以绝对定位来做位置。
#div_img {
width:243px;
height:200px;
position:relative;
}
#div_img img {
position: absolute;
left:expression(243/2 - this.width/2 + "px");
}此方法FF下无效- -|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language=javascript src="autoImg.js"></script>
</head><body>
<style type="text/css">
.box{
width:200px; height:200px; border: 1px solid #eee;
/**//*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/**//*设置水平居中*/
text-align:center;
/**//* 针对IE的Hack */
*display: block;
*font-size: 175px;/**//*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/**//*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img{
/**//*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" onload="autoimg(this,200,200)" /></div>
</body>
</html>autoImg.js文件// JavaScript Documentfunction cssX(elem){//直接得到宽度
   if(elem.style.width){return elem.style.width;}
   if(elem.currentStyle)return elem.currentStyle.width;
   if(document.defaultView && document.defaultView.getComputedStyle)
      {return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");}
}function cssY(elem){//直接得到高度
   if(elem.style.height){return elem.style.height;}
   if(elem.currentStyle)return elem.currentStyle.height;
   if(document.defaultView && document.defaultView.getComputedStyle)
      {return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height");      }
} var resetCSS=function(elem,prop){
    var old ={};
    for (var i in prop){
         old[i] =elem.style[i];
         elem.style[i] = prop[i];
     }
    return old;
}

var restoreCSS=function(elem,prop){
    for (var i in prop)
      {elem.style[i]=prop[i];}
}    function getWidth(elem){
   if(elem.style.display!="none"){
        return elem.offsetWidth || parseInt(cssX(elem));
     }
    var old = resetCSS(elem,{
         display: '',
         visibility: 'hidden',
         position: 'absolute'
     });
    var w = elem.clientWidth || parseInt(cssX(elem));
     restoreCSS(elem,old);
    return w;
}   function getHeight(elem){
   if(elem.style.display!="none"){
        return elem.offsetWidth || parseInt(cssY(elem));
     }
    var old = resetCSS(elem,{
         display: '',
         visibility: 'hidden',
         position: 'absolute'
     });
    var w = elem.clientHeight || parseInt(cssY(elem));
     restoreCSS(elem,old);
    return w;
}function autoimg(obj,width,height)
{
   if(obj==undefined)
   { //得到触发事件的元素
   var evt= window.event;
      var obj = evt.target||evt.srcElement;
}
width=width||getWidth(obj.parentElement); //若不指定宽度则得到其父元素的宽度
height=height||getHeight(obj.parentElement);    myImage = new Image();
myImage.src = obj.src; if (myImage.width>0 && myImage.height>0)
{
   var rate = 1;
   if (myImage.width>width || myImage.height>height)
   {
    if (width/myImage.width<height/myImage.height)
    {
       rate = width/myImage.width;
    }
    else
    {
       rate = height/myImage.height;
    }

   }
    obj.width = myImage.width*rate;
    obj.height = myImage.height*rate;

}
}網上找了一個用js 來實現的...