如何在 div 中居中（背景）图像？

Posted 2023-03-05

【中文标题】如何在 div 中居中（背景）图像？

【英文标题】：How to center a (background) image within a div?

【发布时间】：2011-06-29 17:46:31

【问题描述】：

是否可以在 div 中将背景图像居中？我几乎尝试了所有方法 - 但没有成功：

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit  background-image: url(images/pic.png); background-repeat: none; text-align: center; 

这可能吗？

【参考方案1】：

这适用于将图像对齐到 div 的中心。

.yourclass 
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

【参考方案2】：

要居中或定位背景图像，您应该使用 background-position 属性。 background-position 属性从元素的top 和left 两侧设置背景图像的起始位置。 CSS 语法是 background-position : xvalue yvalue; 。

“xvalue”和“yvalue”支持的值是长度单位，如px，以及百分比和方向名称，如左、右等。

“xvalue”是背景的水平位置，从元素顶部开始。这意味着如果您使用50px，它将距离元素顶部“50px”。而“yvalue”是垂直位置，条件相同。

因此，如果您使用background-position: center;，您的背景图片将居中。

但我总是使用这个代码：

.yourclass 
  background: url(image.png) no-repeat center /cover;
 

我知道这很令人困惑，但这意味着：

.yourclass 
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

我也知道background-size 是一个新属性，在压缩代码中/cover 是指fill Windows 桌面背景中的背景大小和定位。

您可以在here 和background-size 在here 中查看有关background-position 的更多详细信息。

【参考方案3】：

这对我有用：

.network-connections-icon 
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;

【讨论】：

margin: 0 auto; 其中auto 使它在 div 中水平居中。谢谢！

也适用于精灵表精灵。非常感谢

【参考方案4】：

如果您的背景图像是垂直对齐的精灵表，您可以像这样将每个精灵水平居中：

#doit 
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];

如果您的背景图像是水平对齐的精灵表，您可以像这样垂直居中每个精灵：

#doit 
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;

如果您的精灵表很紧凑，或者您不想在上述任一场景中将背景图像居中，则这些解决方案不适用。

【参考方案5】：

这对我有用：

<style>
   .WidgetBody
           
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        
</style>        

【参考方案6】：

这对我有用：

#doit
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
  

【参考方案7】：

试试background-position:center;

编辑：由于这个问题得到了很多关注，因此值得添加一些额外的信息：

text-align: center 将不起作用，因为背景图像不是文档的一部分，因此不是流程的一部分。

background-position:center 是background-position: center center 的简写； (background-position: horizontal vertical);

【讨论】：

其实你只需要background-position:center;

所选答案导致我的整个背景由于某种原因消失（公平地说，我正在做一些可能导致它的 jquery 东西？），但这个答案有效。点赞。

【参考方案8】：

#doit 
    background: url(url) no-repeat center;

【讨论】：

谢谢。居中的具体 CSS 是 "background-position: center;"

@Green：查看我对精灵背景图像的回答。

如果您希望整个 div 都被图像填充并且没有多余的空间，您应该使用background-size: cover; 如果您希望整个图像显示而不被截断或拉伸图像的任何部分，您想用background-size: contain;

【参考方案9】：

使用背景位置：

background-position: 50% 50%;

【讨论】：

如果您需要图像水平居中但垂直顶部，则很有用：背景位置：50% 0%;

50% 0 比 0 短 ;-) 在 CSS 中，当值为 0 时，你永远不需要任何单位