html - 使用 max-height 和 max-width 垂直居中图像

Question

我有以下 html 代码:

<div style="border: 3px coral solid;width:400px;height:400px;background:#D4D0C8;">
    <img style="max-width:400px;max-height:400px;" src="myImage.jpg">
</div>

使用这些样式，宽度大于 400 像素的图像会调整大小但仍保留在 div 的顶部。有没有办法让它们垂直居中？

Answer 1

CSS:

div {
    border: 3px solid coral;
    width: 400px;
    height: 400px;
    background: #d4d0c8;
    line-height: 400px;
    text-align: center;
}
img {
    max-width:400px;
    max-height:400px;
    vertical-align: middle;
}

参见 demo fiddle .