CSS 如何在div内垂直居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2237636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center image inside div
提问by Josef Sábl
I have a markup like this:
我有一个这样的标记：
<div>
<img />
</div>
The div is higher than img:
div高于img：
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
I need the image to be in the middle of the div (have same amout of white space above and below it).
我需要图像位于 div 的中间（在其上方和下方具有相同的空白区域）。
I tried this and it does not work:
我试过这个，但它不起作用：
div {
vertical-align: middle;
}
回答by pixeline
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更具语义的解决方案。然后您可以指定背景的位置
background-position: center center;
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
如果它不是装饰性的并且构成有价值的信息，那么 img 标签是合理的。在这种情况下，您需要做的是使用以下属性设置包含 div 的样式：
div{
display: table-cell; vertical-align: middle
}
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
在此处阅读有关此技术的更多信息。报告不适用于 IE6/7（适用于 IE8）。
回答by akimsko
Another way is to set your line-height in the container div, and align your image to that using vertical-align: middle.
另一种方法是在容器 div 中设置行高，并使用 vertical-align: middle 将图像与此对齐。
html:
html：
<div class="container"><img></div>
css:
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;
}
It's off the top of my head. But I've used this before - it should do the trick. Works for older browsers as well.
它不在我的头顶。但我以前用过这个——它应该可以解决问题。也适用于较旧的浏览器。
回答by Diogo Melo
Let's say you want to put the image (40px X 40px) on the center (horizontal and vertical) of the div class="box". So you have the following html:
假设您想将图像 (40px X 40px) 放在 div class="box" 的中心（水平和垂直）。所以你有以下html：
<div class="box"><img /></div>
What you have to do is apply the CSS:
您需要做的是应用 CSS：
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}
Your div can even change it's size, the image will always be on the center of it.
您的 div 甚至可以更改其大小，图像将始终位于其中心。
回答by Shawn Steward
This is a solution I've used before to accomplish vertical centering in CSS. This works in all the modern browsers.
这是我以前用来在 CSS 中实现垂直居中的解决方案。这适用于所有现代浏览器。
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Excerpt:
摘抄：
<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>
(Inline styles for demonstration purposes)
（用于演示目的的内联样式）
回答by Kevin Bowersox
Another option is to set display:blockon the imgand then set margin: 0px auto;
另一种选择是设置display:block上img然后设置margin: 0px auto;
img{
display: block;
margin: 0px auto;
}
回答by Cantrelby
As I too am constantly being let down by cross-browser CSS, I'd like to offer a JQuery solution here. This takes the height of each image's parent div, divide it by two and set it as a top margin between the image and the div:
由于我也经常被跨浏览器的 CSS 打断，我想在这里提供一个 JQuery 解决方案。这需要每个图像的父 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);
});
回答by Dewfy
I've posted about vertical alignment it in cross-browser way (Vertically center multiple boxes with CSS)
我已经发布了关于以跨浏览器方式垂直对齐它（使用 CSS 垂直居中多个框）
Create one-cell table. Only table has cross-browser vertical-align
创建单单元格表。只有表格具有跨浏览器垂直对齐
回答by Ashish Maradiya
image to be in the middle of the div
图像位于 div 的中间
div img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height:50px;
width:50px;
}
回答by Ashish Maradiya
<!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>
回答by MK Yung
The accepted answer did not work for me. vertical-alignneeds a partner so that they can be aligned at their centers. So I created an empty div with full height of the parent div but with no width for the image to align with. inline-blockis needed for both objects to stay in one line.
接受的答案对我不起作用。vertical-align需要一个合作伙伴，以便他们可以在他们的中心保持一致。所以我创建了一个空的 div，它具有父 div 的全高，但没有与图像对齐的宽度。inline-block两个对象都需要保持在一行。
<div>
<div class="placeholder"></div>
<img />
</div>
CSS:
CSS：
.class {
height: 100%;
width: 0%;
vertical-align: middle;
display: inline-block
}
img {
display: inline-block;
vertical-align: middle;
}
