Jak wyśrodkować obraz (tło) w div?

Try background-position:center;

EDIT: ponieważ to pytanie jest coraz dużo odsłon, warto dodać kilka dodatkowych informacji:

text-align: center nie będzie działać, ponieważ obraz tła nie jest częścią dokumentu i dlatego nie jest częścią przepływu.

background-position:center jest skrótem od background-position: center center; (background-position: horizontal vertical);

Użyj background-position:

background-position: 50% 50%;

Jeśli obraz tła jest wyrównanym pionowo arkuszem sprite, możesz wyśrodkować poziomo każdy sprite w następujący sposób:

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

Jeśli obraz tła jest wyrównanym poziomo arkuszem sprite, możesz wyśrodkować każdy sprite w pionie w następujący sposób:

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

Jeśli arkusz sprite jest kompaktowy lub nie próbujesz wyśrodkować obrazu tła w jednym z wyżej wymienionych scenariuszy, rozwiązania te nie mają zastosowania.

To działa dla mnie:

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

Do wyśrodkowania lub pozycjonowania obrazu tła należy użyć właściwości background-position. Właściwość background-position ustawia pozycję początkową obrazu tła po stronach top i left elementu . Składnia CSS to background-position : xvalue yvalue;.

"xvalue" i "yvalue" obsługiwane wartości są jednostkami długości, takimi jak px oraz nazwami procentowymi i kierunkowymi, takimi jak left, right i itd .

"xvalue" jest poziomą pozycją tła i zaczyna się od góry elementu . To znaczy jeśli użyjesz 50px to będzie "50px" od góry elementów . A "yvalue" to pozycja pionowa, która ma ten sam warunek .

Więc jeśli użyjesz background-position: center; Twój obraz tła będzie wyśrodkowany .

Ale zawsze używam tego kodu:

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

Wiem, że to takie zagmatwane, ale to znaczy:

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

I Wiem, że też background-size jest nową właściwością, a w skompresowanym kodzie co to jest /cover ale te kody oznaczają fill rozmiar tła i pozycjonowanie w tle pulpitu systemu windows .

Więcej szczegółów na temat background-position można zobaczyć w tutaj i background-size w tutaj .

To działa dla mnie:

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

To działa dla mnie:

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