Html 如何在更大的 div 内制作图像中心（垂直和水平）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/388180/
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 make an image center (vertically & horizontally) inside a bigger div
提问by Shameem
I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.
我有一个 200 x 200 像素的 div。我想在 div 的中间放置一个 50 x 50 px 的图像。
How can it be done?
怎么做到呢？
I am able to get it centered horizontally by using text-align: centerfor the div. But vertical alignment is the issue..
我可以通过使用text-align: centerdiv使其水平居中。但垂直对齐是问题。
采纳答案by bochgoch
Personally, I'd place it as the background image within the div, the CSS for that being:
就我个人而言，我会将它作为 div 中的背景图片，它的 CSS 是：
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Assumes a div with id="demo"as you are already specifying heightand widthadding a backgroundshouldn't be an issue)
（假设id="demo"您已经指定了一个 divheight并且width添加一个background应该不是问题）
Let the browser take the strain.
让浏览器承受压力。
回答by Jonathan Argentiero
Working in old browsers (IE >= 8)
在旧浏览器中工作（IE >= 8）
Absolute position in combination with automatic margin permits to center an element horizontally and vertically. The element position could be based on a parent element position using relative positioning. View Result
绝对位置结合自动边距允许将元素水平和垂直居中。元素位置可以基于使用相对定位的父元素位置。查看结果
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
回答by andyk
another way is to create a tablewith valign, of course. This would work regardless of you knowing the div's height or not.
当然，另一种方法是创建一个tablewith valign。无论您是否知道 div 的高度，这都会起作用。
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
but you should always stick to just csswhenever possible.
但你应该始终坚持，css只要有可能。
回答by Tim Knight
I would set your larger div with position:relative;then for your image do this:
我会position:relative;为您的图像设置更大的 div，然后执行以下操作：
img.classname{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
This only works because you know the dimensions of both the image and the containing div. This will also let you have other items within the containing div... where solutions like using line-height will not.
这只有效，因为您知道图像和包含 div 的尺寸。这也将使您在包含的 div 中拥有其他项目......其中使用 line-height 之类的解决方案不会。
EDIT: Note... your margins are negative half of the size of the image.
编辑：注意...您的边距是图像大小的负一半。
回答by Chris
This works correctly:
这正常工作：
display: block;
margin-left: auto;
margin-right: auto
else try this if the above only gives you horizontal centering:
否则试试这个，如果上面只给你水平居中：
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
回答by avrahamcool
here's another method to center everything within anything.
这是将所有内容集中在任何内容中的另一种方法。
HTML:(simple as ever)
HTML：（一如既往的简单）
<div class="Container">
<div class="Content"> /*this can be an img, span, or everything else*/
I'm the Content
</div>
</div>
CSS:
CSS：
.Container
{
text-align: center;
}
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
Benefits
好处
The Container and Content height are unknown.
Container 和 Content 高度未知。
Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, also Works great with CSS transitions.
居中没有特定的负边距，没有设置行高（所以它适用于多行文本）并且没有脚本，也适用于 CSS 过渡。
回答by Kshitij Chopra
This is coming a bit late, but here's a solution I use to vertical align elements within a parent div.
这有点晚了，但这是我用来垂直对齐父 div 中元素的解决方案。
This is useful for when you know the size of the container div, but not that of the contained image.(this is frequently the case when working with lightboxes or image carousels).
当您知道容器 div 的大小但不知道所包含图像的大小时，这很有用。（使用灯箱或图像轮播时经常出现这种情况）。
Here's the styling you should try:
这是您应该尝试的样式：
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
回答by Rahul Paru
回答by svachalek
I've found that Valamas' and Lepu's answers above are the most straightforward answers that deal with images of unknown size, or of known size that you'd rather not hard-code into your CSS. I just have a few small tweaks: remove irrelevant styles, size it to 200px to match the question, and add max-height/max-width to handle images that may be too large.
我发现上面的 Valamas 和 Lepu 的答案是处理未知大小或已知大小的图像的最直接的答案，您不想将其硬编码到 CSS 中。我只是有一些小的调整：删除不相关的样式，将其大小调整为 200px 以匹配问题，并添加 max-height/max-width 以处理可能太大的图像。
div.image-thumbnail
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
回答by Scott Evernden
in the div
在 div
style="text-align:center; line-height:200px"
