html - 以最大高度和最大宽度将图像垂直居中

我有以下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的顶部。有什么办法可以使它们垂直居中吗？

最佳答案

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。

关于html - 以最大高度和最大宽度将图像垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6635374/