如何在一个 div 中居中(背景)图像？

是否可以在 div 中居中显示背景图像？我几乎尝试了所有方法，但没有成功:

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


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

这可能吗？

274059 次浏览
小开

试试 background-position:center;

编辑: 由于这个问题的观点很多，所以值得加入一些额外的信息:

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

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

小开

使用背景-位置:

background-position: 50% 50%;
小开
最佳答案 
#doit {
background: url(url) no-repeat center;
}
小开

这对我有用:

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

这对我有用:

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

如果你的背景图像是一个垂直对齐的精灵表格，你可以像下面这样水平居中每个精灵:

#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%;
}

如果您的精灵表格是紧凑的，或者您没有尝试在上述场景之一的背景图像居中，这些解决方案不适用。

小开

这对我有用:

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

对于居中或定位背景图像，应使用 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 桌面背景中。

您可以在 给你中看到关于 background-position的更多细节，在 给你中看到关于 background-size的更多细节。

小开

这对于将图像对齐到 div 中心是有效的。

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

提交答案