Come centrare un'immagine (di sfondo) all'interno di un div?

È possibile centrare un'immagine di sfondo in un div? Ho provato praticamente tutto, ma nessun successo:

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

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

È possibile?

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

provare background-position:center;

EDIT: poiché questa domanda sta ottenendo molte visualizzazioni, vale la pena aggiungere alcune informazioni extra:

text-align: center non funzionerà perché l'immagine di sfondo non fa parte del documento e quindi non fa parte del flusso.

background-position:centerè una scorciatoia per background-position: center center; ( background-position: horizontal vertical);

Usa posizione di sfondo:

background-position: 50% 50%;

Per centrare o posizionare l'immagine di sfondo è necessario utilizzare la background-positionproprietà. La proprietà background-position imposta la posizione iniziale di un'immagine di sfondo tope i leftlati dell'elemento. La sintassi CSS è background-position : xvalue yvalue;.

I valori supportati "xvalue" e "yvalue" sono unità di lunghezza come pxe nomi di percentuale e direzione come left, right ed ecc.

"Xvalue" è la posizione orizzontale dello sfondo e inizia dalla parte superiore dell'elemento. Significa che se lo usi 50pxsarà "50px" lontano dalla cima degli elementi. E "yvalue" è la posizione verticale che presenta le stesse condizioni.

Quindi se si utilizza background-position: center;l'immagine di sfondo verrà centrata.

Ma uso sempre questo codice:

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

So che è così confuso ma significa:

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

E so che anche questa background-sizeè una nuova proprietà e nel codice compresso ciò che è, /coverma questi codici significa filldimensionamento e posizionamento in background sullo sfondo del desktop di Windows.

È possibile visualizzare ulteriori dettagli su background-positiondi qui e background-sizedi qui .

Se l'immagine di sfondo è un foglio sprite allineato verticalmente, puoi centrare orizzontalmente ogni sprite in questo modo:

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

Se l'immagine di sfondo è un foglio sprite allineato orizzontalmente, puoi centrare verticalmente ogni sprite in questo modo:

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

Se il tuo foglio sprite è compatto o non stai cercando di centrare l'immagine di sfondo in uno dei suddetti scenari, queste soluzioni non si applicano.

Questo funziona per me:

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

Questo funziona per me:

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

Questo funziona per me:

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

Questo funziona per me per allineare l'immagine al centro del div.

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