（背景）画像を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 を使用する必要があります。背景位置プロパティは、背景から画像の開始位置を設定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で、ここ。

背景画像が垂直に配置されたスプライトシートの場合、次のように各スプライトを水平方向に中央揃えにすることができます。

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

スプライトシートがコンパクトな場合、または前述のシナリオのいずれかで背景画像を中央に配置しない場合、これらのソリューションは適用されません。

これは私にとってはうまくいきます：

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