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

是否可以将div中的背景图像居中放置？我已经尝试了几乎所有内容-但没有成功：

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

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

这可能吗？

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

尝试 background-position:center;

编辑：由于这个问题越来越多的看法，值得添加一些额外的信息：

text-align: center 将无法使用，因为背景图片不是文档的一部分，因此也不是流程的一部分。

background-position:center是简写background-position: center center; （background-position: horizontal vertical）;

使用背景位置：

background-position: 50% 50%;

对于居中或定位背景图像，应使用background-positionproperty。background-position属性设置元素背景top和left元素侧面的背景图像的起始位置。CSS语法为background-position : xvalue yvalue;。

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

“ 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但是这些代码意味着fillWindows桌面背景中的背景大小和位置。

你可以看到更多的细节background-position在这里和background-size在这里。

如果您的背景图片是垂直对齐的精灵图，则可以像这样水平放置每个精灵：

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

如果您的背景图片是水平对齐的Sprite工作表，则可以像这样垂直放置每个Sprite：

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

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

这对我有用：

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

这对我有用：

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

这对我有用：

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

这对我来说可以使图像与div中心对齐。

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