我有这样的标记：
<div>
<img />
</div>
div高于img：
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
我需要将图像放置在div的中间（在其上下具有相同的空白）。
我试过了，它不起作用：
div {
vertical-align: middle;
}
Answers:
如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是更语义的解决方案。然后可以指定背景的位置
background-position: center center;
如果它不是装饰性的并且构成有价值的信息，则img标签是合理的。在这种情况下，您需要使用以下属性设置包含div的样式：
div{
display: table-cell; vertical-align: middle
}
在此处阅读有关此技术的更多信息。报告在IE6 / 7上不起作用（在IE8上有效）。
另一种方法是在容器div中设置行高，然后使用vertical-align：middle将图像对齐。
的HTML：
<div class="container"><img></div>
CSS：
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}
它不在我的头上。但是我以前用过-应该可以解决问题。同样适用于较旧的浏览器。
display: table-cell;与该解决方案相比，这将导致更多的痛苦
假设您要将图片（40px X 40px）放在div class =“ box”的中心（水平和垂直）上。因此，您具有以下html：
<div class="box"><img /></div>
您要做的就是应用CSS：
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}
您的div甚至可以更改其大小，图像将始终位于其中心。
这是我以前用来在CSS中完成垂直居中的解决方案。这适用于所有现代浏览器。
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
摘抄：
<div style="display: table; height: 400px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
<div style="position: relative; top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
（用于演示目的的内联样式）
我已经发布了有关以跨浏览器方式垂直对齐的信息（使用CSS将多个框垂直居中）
创建一个单元格表。只有表格具有跨浏览器的垂直对齐方式
图片位于div的中间
div img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height:50px;
width:50px;
}
在您的示例中，div的高度是静态的，图像的高度是静态的。给图像赋予margin-top值( div_height - image_height ) / 2
如果图片是50px，则
img {
margin-top: 25px;
}
您是否尝试过在div上设置边距？例如
div {
padding: 25px, 0
}
顶部和底部。您也许还可以使用一个百分比：
div {
padding: 25%, 0
}
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>
接受的答案对我不起作用。vertical-align需要一个合作伙伴，以便他们可以在中心对齐。因此，我创建了一个空的div，其高度与父div的高度相同，但没有与图像对齐的宽度。inline-block两个对象都必须保持一行。
<div>
<div class="placeholder"></div>
<img />
</div>
CSS：
.class {
height: 100%;
width: 0%;
vertical-align: middle;
display: inline-block
}
img {
display: inline-block;
vertical-align: middle;
}
div {
width:200px;
height:150px;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
<div>
<img src="images/logo.png" />
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.verticalAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah)/2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
$(document).ready(function(e) {
$('.in').verticalAlign();
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>
<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>
</body>
</html>
如果您想让内容成为div中所需的内容，那么这对我来说就是成功的：
<div style="
display: table-cell;
vertical-align: middle;
background-color: blue;
width: ...px;
height: ...px;
">
<div style="
margin: auto;
display: block;
width: fit-content;
">
<!-- CONTENT -->
<img src="...">
<p> some text </p>
</div>
</div>