居中对齐div中的图像而不更改父div

Question

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

＆＃13;

＆＃13;

.container {
    border: 1px solid red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二个选项是更改图像上的CSS并使用：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

j08691提供了一个很好的解决方案，但如果你不能改变父div，也许这会有所帮助：

.container {
    border: 1px solid red;
}

img {
    background: #3A6F9A;
    display: block;
    margin: auto;
    margin-top: 25%;
    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>