Question

我需要将图像定位在div内垂直居中。你能帮我这个吗？以下是我尝试过的代码段。

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

sample image

Answer 1

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/

Answer 2

<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/

Answer 3

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>

Answer 4

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>

垂直居中div内的图像

4 个答案: