Question

怎么让不同尺寸的图片在固定的div中居中？！

如题：
假如现有一个div容器，宽200px，高200px。
有n张图片，尺寸均不相同(最大不会超过容器大小)，怎么让每一张图片在这个div容器里面居中显示？

Answer 1

<div style="height: 200px; width: 200px; overflow: hidden; display: table-cell; text-align: center;
vertical-align: middle; line-height: 200px; border:1px solid #000;">
<img src="图片路径" alt="" style="position: relative;
_top: 50%; _margin-top: expression(this.height/2*-1);" />
</div>

试试这样的写法，这样图片是自身的尺寸，垂直和水平方向都是居中的

Answer 2

<img src="图片路径">这个在body里写

这个在CSS样式中写
<style>
div{ border:1px solid red; width:200px; height:200px;}
img{ width：200px; height:200px;}
</style>

Answer 3

给div设定text-align:center;可使图片水平居中，再给图片img设定 vertical-align:middle;即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）

还有一个方法，就是用table布局，td默认是水平方向居左的，但是垂直方向是居中的，所以你套一个table后再插入图片的话，也能很好的达到垂直居中

追问

你决定可能么？不知道你有没有参数过。
text-align:center;和vertical-align:middle;都是居中，一个左右居中，一个上下居中。

但是，希望你别忘记了，这2个是针对文字的居中。是文字内容，不是所有的标签

Answer 4

div { width:200px; height:200px; position:relative; }
div img { top:0; bottom:0; left:0; right:0; margin:auto; position:absolute; }

Answer 5

div{width:200px; height:200px; text-align:center; overflow:hidden; margin:0 auto;/*div居中，如果不需要可不加*/}
div img{height:200px; width:auto; max-width:200px}