html - 在不更改父 div 的情况下，在 div 中居中对齐图像

Question

我正在尝试将 div 中的图像居中对齐。水平对齐不是问题，但无论我尝试什么，我都无法让图像垂直居中对齐。 请记住，我仅限于更改图像元素的 css，理想情况下不需要对父/包含 div 进行任何更改，因为父/包含 div 也将用于其他元素。 任何建议都会很棒。

.container {
    border: 1px solid red;
}

img {
    background: #3A6F9A;
    display: block;
    margin: auto;
    max-width:100%;
    max-height:100%;
}

<div class=container style="left: 2ch; top: 3em; width: 15ch; height: 5em;">
   <img src="http://jsfiddle.net/img/logo.png" />
</div>

Answer 1

一种选择是将 display:table-cell; 和 vertical-align:middle; 添加到容器 div，

.container {
    border: 1px solid red;
    display:table-cell;
    vertical-align:middle;
}

img {
    background: #3A6F9A;
    display: block;
    margin: auto;
    max-width:100%;
    max-height:100%;
}

<div class=container style="left: 2ch; top: 3em; width: 15ch; height: 5em;">
   <img src="http://jsfiddle.net/img/logo.png" />
</div>

第二种选择是更改图像的 CSS 并使用:

.container {
    border: 1px solid red;
}

img {
    background: #3A6F9A;
    display: block;
    margin: auto;
    max-width:100%;
    max-height:100%;
    top: 50%;
    position:relative;
    transform: translateY(-50%);
}

<div class=container style="left: 2ch; top: 3em; width: 15ch; height: 5em;">
   <img src="http://jsfiddle.net/img/logo.png" />
</div>