我在这样的 div 中有一张图片
<div><img /><div>
图像是动态的，没有固定大小。 div 的大小为200px by 200px。事先不知道图像大小。如果图片大小大于190px by 190px，则设置为190px by 190px（即max-width:190px、max-height:190px）。如何在满足这些需求的情况下使图像居中？我也需要在 Internet Explorer 7 中运行的解决方案。
不确定图像是否会小于 200 像素。
我也想要水平对齐。
不支持 Internet Explorer 7。
（在 StackOverflow 上已就相同问题提出了一些问题，但我的情况不同，因此它们不适用于此特定问题。）
【问题讨论】：
解决办法是把div改成表格。通常，您不应该使用表格进行定位，但是当涉及到较旧的不符合标准的浏览器时，有时这是唯一的选择。 Demonstration here。作为记录，这也适用于 Internet Explorer 6。
代码：
CSS
#theDiv
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
HTML
<table id="theDiv" style="border: solid 1px #000">
<tr>
<td>
<img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
</td>
</tr>
</table>
这是一个update，它使用 CSS 而不是将标记更改为实际的表格：
#theDiv
{
display: table;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div id="theDiv" style="border: solid 1px #000">
<div class="tr">
<div class="td">
<img id="theImg" src="http://lorempixel.com/100/100/" />
</div>
</div>
</div>
【讨论】：
看到这个小提琴：http://jsfiddle.net/ANwmv/
按照以下建议解决居中问题：http://www.brunildo.org/test/img_center.html
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
HTML：
<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
【讨论】：
给父级一个 line-height 相当于它自己的高度，以及一个 text-align 属性的中心。给图像一个中间的 vertical-align 属性，使其在其行高内居中：
HTML：
<html>
<body>
<div>
<img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>
</div>
</body>
</html>
CSS：
div, img {
border: 1px solid black;
}
div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
img {
max-width: 190px;
max-height: 190px;
vertical-align: middle;
}
【讨论】：
<table> 将该内容标记为表格，但事实并非如此。 <div> 在语义上毫无意义。 Line-height 只会影响内联元素，其中包括图像（出于某种原因，IMO）。我很想知道你为什么认为这是不好的做法？
line-height 属性是完全有效的，当然不会“滥用”它。
letter-spacing 属性没有这样做：“letter-spacing 属性指定文本字符之间的间距行为”（w3.org/wiki/CSS/Properties/letter-spacing）。 text-align 属性当然是：“text-align 属性描述了块容器的行内级内容如何对齐。” (w3.org/wiki/CSS/Properties/text-align)。
你可以这样做：
<div style="text-align:center;vertical-align:middle;">
<img style="margin:0 auto" />
</div>
【讨论】：
margin: 0 auto 将上边距设置为 0px。你应该使用margin: auto;