在div中垂直居中放置一個圖像

我需要將圖像放置在div的垂直居中。你能幫我解決這個問題嗎？以下是我嘗試過的代碼片段。在div中垂直居中放置一個圖像

<html> 
<body> 
<div style="width:190px;height:100%;"> 
<img src="sample.jpg" width="190px" height="190px"/> 
</div> 
</body> 
</httml>

sample image

來源

2014-04-30 Anandh

（http://jsfiddle.net/v6R5J/） – potashin

<html> 
<body> 
<div style="width:190px;height:100%;position:relative;"> 
<img src="sample.jpg" style="height:190px; width:190px; position:absolute; margin:-95px 0 0 -95px; left:50%; top:50%;" /> 
</div> 
</body> 
</html>

的jsfiddle：http://jsfiddle.net/v6R5J/2/

來源

2014-04-30 10:00:30 Aaroniker

謝謝，工作很好 – Anandh

HTML

<div> 
    <img src="http://i.stack.imgur.com/PbkUt.jpg" width="190px" height="190px"/> 
</div>

CSS

div{ 
    height:400px; 
    width:190px; 
    background-color:grey; 
    display:table-cell; 
    vertical-align:middle; 
}

檢查這個小提琴http://jsfiddle.net/x5TK4/

來源

2014-04-30 10:06:08

FIDDLE - 用其它方法：[？這是什麼問題]

<style> 
    #Image{ 
    width: 190px; 
    height: 100%; 
    background-image: url(sample.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
    } 
</style> 
<body> 
    <div id="Image"/> 
</body>

來源

2014-04-30 10:06:34 Kardaw

http://jsfiddle.net/9kn5N/

<div style="width:500px;height:500px;border:1px solid #000; text-align: center;"> 
<img src="http://i.stack.imgur.com/PbkUt.jpg" width="190px" height="190px" style="margin-top: calc(50% - 95px);"/> 
</div>

來源

2014-04-30 10:10:14 jungerislaender

在div中垂直居中放置一個圖像

回答

相關問題