在div中垂直居中放置图像

Question

I need to position the image to center vertically inside the div. 我需要将图像放置在div内垂直居中的位置。 Could you help me on this. 你能帮我这个忙吗？ Below is my tried snippet. 以下是我尝试过的代码段。

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

样本图片

Answer 1

HTML 的HTML

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

CSS 的CSS

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

Check this fiddle http://jsfiddle.net/x5TK4/ 检查这个小提琴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/ jsfiddle： http : //jsfiddle.net/v6R5J/2/

Answer 3

FIDDLE - An other way: 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/ 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 个解决方案

解决方案1
3

解决方案2
0 2014-04-30 10:00:30

解决方案3
0 2014-04-30 10:06:34

解决方案4
0 2014-04-30 10:10:14

在div中垂直居中放置图像

问题描述

4 个解决方案

解决方案1 3

解决方案2 0 2014-04-30 10:00:30

解决方案3 0 2014-04-30 10:06:34

解决方案4 0 2014-04-30 10:10:14

解决方案1
3

解决方案2
0 2014-04-30 10:00:30

解决方案3
0 2014-04-30 10:06:34

解决方案4
0 2014-04-30 10:10:14