Как центрировать (фоновое) изображение в div?

Можно ли центрировать фоновое изображение в div? Я пробовал практически все, но не добился успеха:

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

Это возможно?

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

попробуйте background-position:center;

EDIT: поскольку этот вопрос получает много просмотров, его стоит добавить дополнительную информацию:

text-align: center не будет работать, потому что фоновое изображение не является частью документа и поэтому не является частью streamа.

background-position:center – сокращение для background-position: center center ; ( background-position: horizontal vertical );

Использовать фоновое положение:

 background-position: 50% 50%; 

Если фоновое изображение представляет собой вертикально выровненный лист спрайтов, вы можете горизонтально центрировать каждый спрайт следующим образом:

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

Для центра или позиционирования фонового изображения вы должны использовать свойство background-position . Свойство 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; } 

Это работает для меня:

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

Это работает для меня: