如何在div内垂直居中放置图像
我有这样的标记：
<div> <img /> </div> div比img高：
div { height: 100px; } img { height: dynamic-value-smaller-than-100px; }
我需要图像在div中间（在它上面和下面有相同的空白空间）。
我试过这个，它不工作：
div { vertical-align: middle; }
如果你的图像是纯粹的装饰，那么它可能是一个更加语义的解决scheme，用它作为背景图像。 然后您可以指定背景的位置
background-position: center center;
如果它不具有装饰性并构成有价值的信息，则img标签是合理的。 在这种情况下，你需要做的是使用以下属性来设置包含div的样式：
div{ display: table-cell; vertical-align: middle }
在这里阅读更多关于这种技术 。 报告不能在IE6 / 7上工作（适用于IE8）。
另一种方法是在容器div中设置行高，并将图像与vertical-align：middlealignment。
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; }
这是我的头顶。 但是我之前用过这个 – 它应该可以做到这一点。 适用于较旧的浏览器。
假设您要将图像（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中完成垂直居中的解决scheme。 这适用于所有现代浏览器。
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>
（用于演示目的的内联样式）
另一个select是在img上设置display:block ，然后设置margin: 0px auto;
img{ display: block; margin: 0px auto; }
由于我也不断被跨浏览器CSS放下，所以我想在这里提供一个JQuery解决scheme。 这需要每个图像的父div的高度，将它除以2，并将其设置为图像和div之间的顶部边距：
$('div img').each(function() { m = Math.floor(($(this).parent('div').height() - $(this).height())/2); mp = m+"px"; $(this).css("margin-top",mp); });
图像在div的中间
div img{ bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; height:50px; width:50px; }
我以跨浏览器的方式发布了垂直alignment方式（ 用CSS垂直居中多个框 ）
创build一个单元格表格。 只有表格具有跨浏览器的垂直alignment
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>
在你的例子中，div的高度是静态的，图像的高度是静态的。 为图片提供( div_height - image_height ) / 2的margin-top值
如果图像是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需要一个合作伙伴，以便他们可以在其中心alignment。 所以我创build了一个空的div与父div的完整高度，但没有宽度的图像alignment。 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; }
<!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>
