Html 如何在div中居中（背景）图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5040232/
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 center a (background) image within a div?
提问by oompahloompah
Is it possible to center a background image in a div? I have tried just about everything - but no success:
是否可以将背景图像居中放置在 div 中？我已经尝试了几乎所有的东西 - 但没有成功：
<div id="doit">
Lorem Ipsum ...
</div>
//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
Is this possible?
这可能吗？
回答by Jake Lucas
#doit {
background: url(url) no-repeat center;
}
回答by TimCodes.NET
try background-position:center;
尝试 background-position:center;
EDIT: since this question is getting lots of views, its worth adding some extra info:
编辑：由于这个问题获得了很多观点，因此值得添加一些额外的信息：
text-align: centerwill not work because the background image is not part of the document and is therefore not part of the flow.
text-align: center将不起作用，因为背景图像不是文档的一部分，因此不是流程的一部分。
background-position:centeris shorthand for background-position: center center; (background-position: horizontal vertical);
background-position:center是background-position: center center; 的简写 ( background-position: horizontal vertical);
回答by Capsule
Use background-position:
使用背景位置：
background-position: 50% 50%;
回答by claytonkirlew
If your background image is a vertically aligned sprite sheet, you can horizontally center each sprite like this:
如果您的背景图像是垂直对齐的精灵表，您可以像这样将每个精灵水平居中：
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: 50% [y position of sprite];
}
If your background image is a horizontally aligned sprite sheet, you can vertically center each sprite like this:
如果您的背景图像是水平对齐的精灵表，您可以像这样垂直居中每个精灵：
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: [x position of sprite] 50%;
}
If your sprite sheet is compact, or you are not trying to center your background image in one of the aforementioned scenarios, these solutions do not apply.
如果您的精灵表很紧凑，或者您没有尝试在上述场景之一中将背景图像居中，则这些解决方案不适用。
回答by Morteza Sadri
For center or positioning the background image you should use background-positionproperty .
The background-position property sets the starting position of a background image from topand leftsides of the element .
The CSS Syntax is background-position : xvalue yvalue;.
对于居中或定位背景图像，您应该使用background-positionproperty 。background-position 属性设置背景图像的起始位置top和left元素的两侧。CSS 语法是background-position : xvalue yvalue;.
"xvalue" and "yvalue" supported values are length units like pxand percentage and direction names like left, right and etc .
“xvalue”和“yvalue”支持的值是长度单位px，如左、右等百分比和方向名称。
The "xvalue" is the horizontal position of the background and starts from top of the element . It means if you use 50pxit will be "50px" away from top of the elements . And "yvalue" is the vertical position that has the same condition .
“xvalue”是背景的水平位置，从元素的顶部开始。这意味着如果您使用50px它，它将距离元素顶部“50px”。而“yvalue”是具有相同条件的垂直位置。
So if you use background-position: center;your background image will be centered .
因此，如果您使用background-position: center;背景图像将居中。
But I always use this code :
但我总是使用这个代码：
.yourclass {
background: url(image.png) no-repeat center /cover;
}I know it is so confusing but it means :
我知道这很令人困惑，但这意味着：
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}And I know that too the background-sizeis a new property and in the compressed code what is /coverbut these codes means fillbackground sizing and positioning in windows desktop background .
而且我知道这也是background-size一个新属性，在压缩代码中/cover，这些代码意味着fillWindows 桌面背景中的背景大小和定位。
You can see more details about background-positionin hereand background-sizein here.
回答by Hemerson Varela
This works for me:
这对我有用：
#doit{
background-image: url('images/pic.png');
background-repeat: no-repeat;
background-position: center;
}
回答by Collin Adams
This works for me:
这对我有用：
.network-connections-icon {
background-image: url(url);
background-size: 100%;
width: 56px;
height: 56px;
margin: 0 auto;
}
回答by Rodrigo Valenzuela
This works for me :
这对我有用：
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>
