在中心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%);
}