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

Question

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

Это код, я использую:

<div class="product-image-gallery"> 
<img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png"> 
</div> 

Смотреть это JSFiddle: https://jsfiddle.net/myvuacwy/

Answer 1

Вы можете использовать align-items: center с CSS3 flexible box layout, который будет согласовывать внутренние элементы в центре поперечной оси (вертикальная плоскость) ,

JSfiddle demo

.product-image-gallery { 
 
    height: 400px; 
 
    display: flex; 
 
    border: 2px solid #e3e3e3; 
 
    align-items: center; 
 
} 
 
.gallery-image.visible { 
 
    max-height: 400px; 
 
    max-width: 400px; 
 
}

<div class="product-image-gallery"> 
 
    <img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png"> 
 
</div>

Answer 2

Вы можете попробовать следующий код

<div style="display: table; height:600px; overflow: hidden;"> 
<div style="display: table-cell; vertical-align: middle;"> 
    <img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png"> 
</div> 

вместе с CSS, конечно! он выравнивает изображение до центра. вот чернила https://jsfiddle.net/myvuacwy/2/