HTML設置圖像中心在股利

Question

你好，我想設置IMG中心格，如Facebook

我的代碼

<div style='border: 1px solid #BFBFBF; background-color: #fff; width: 600px; height: 300px;text-align: center; ' > 

    <img src='http://www.trendycovers.com/covers/fear_is_a_lie_facebook_cover_1463215575.jpg' style='max-width: 600px; max-height: 300px; '> 

</div> 

我的圖像：

見Facebook的：

Answer 1

您需要：

vertical-align: middle; 

檢查該鏈接，例如：

http://jsfiddle.net/kizu/4RPFa/4570/ 

Answer 2

使用jQuery：

val = ($('div').height() - $('img').height())/2; 
$('img').css('top', val); 

Answer 3

您可以使用此解決方案

這個CSS添加到您的IMG的風格：

{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

終極密碼：

<div style='border: 1px solid #BFBFBF; background-color: #fff; width: 600px; height: 300px;text-align: center; ' > 
    <img src='http://www.trendycovers.com/covers/fear_is_a_lie_facebook_cover_1463215575.jpg' style='max-width: 600px;max-height: 300px;position: relative;top: 50%;transform: translateY(-50%);'> 
</div> 

工作例如：https://jsfiddle.net/3ohj2nzo/