Вертикальное выравнивание изображения в центре div

Question

Я хотел бы вертикально выровнять изображение в центре div.

Для этого я использую этот код:

<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;"> 
    <img class="cboxPhoto" src="" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img> 
</div> 

JSFiddle: http://jsfiddle.net/3uk642wg/

Как я могу добиться этого?

Answer 1

div#cboxLoadedContent { 
    .... 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

jsfiddle - http://jsfiddle.net/3uk642wg/1/

div#cboxLoadedContent {border: 1px solid #333; display: inline-block;text-align: center; display: table-cell;vertical-align: middle;} 
 
.cboxPhoto {vertical-align: middle;}

<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;"> 
 
<img class="cboxPhoto" src="https://www.google.com//images/srpr/logo11w.png" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img> 
 
</div>

Answer 2

Если вы работаете в этом на современных браузерах, вы можете попробовать это.

div#cboxLoadedContent { 
border: 1px solid #333; 
display: inline-block; 
text-align: center; 
} 
.cboxPhoto { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
}