Làm cách nào để căn giữa hình ảnh (nền) trong div?

Có thể căn giữa một hình nền trong một div? Tôi đã thử mọi thứ - nhưng không thành công:

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

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

Điều này có thể không?

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

thử background-position:center;

EDIT: vì câu hỏi này đang nhận được nhiều lượt xem, nên thêm một số thông tin bổ sung:

text-align: center sẽ không hoạt động vì hình nền không phải là một phần của tài liệu và do đó không phải là một phần của dòng chảy.

background-position:centerlà tốc ký cho background-position: center center; ( background-position: horizontal vertical);

Sử dụng vị trí nền:

background-position: 50% 50%;

Đối với trung tâm hoặc định vị hình ảnh nền, bạn nên sử dụng background-positiontài sản. Thuộc tính vị trí nền đặt vị trí bắt đầu của ảnh nền từ topvà các leftcạnh của thành phần. Cú pháp CSS là background-position : xvalue yvalue;.

Các giá trị được hỗ trợ "xvalue" và "yvalue" là các đơn vị độ dài như pxvà tỷ lệ phần trăm và tên hướng như trái, phải và v.v.

"Xvalue" là vị trí nằm ngang của nền và bắt đầu từ đỉnh của phần tử. Điều đó có nghĩa là nếu bạn sử dụng 50pxnó sẽ cách "50px" so với đầu các phần tử. Và "yvalue" là vị trí thẳng đứng có cùng điều kiện.

Vì vậy, nếu bạn sử dụng background-position: center;hình nền của bạn sẽ được tập trung.

Nhưng tôi luôn sử dụng mã này:

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

Tôi biết nó rất khó hiểu nhưng nó có nghĩa là:

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

Và tôi biết rằng đó cũng background-sizelà một thuộc tính mới và trong mã nén là gì /covernhưng các mã này có nghĩa là fillđịnh cỡ và định vị nền trong nền của máy tính để bàn.

Bạn có thể xem thêm chi tiết về background-positionở đây và background-sizeở đây .

Nếu hình nền của bạn là một tấm sprite được sắp xếp theo chiều dọc, bạn có thể căn giữa từng sprite như thế này:

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

Nếu hình nền của bạn là một tấm sprite được xếp theo chiều ngang, bạn có thể căn giữa từng sprite như thế này:

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

Nếu bảng sprite của bạn nhỏ gọn hoặc bạn không cố gắng căn giữa hình nền của mình theo một trong các tình huống đã nói ở trên, các giải pháp này không được áp dụng.

Điều này làm việc cho tôi:

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

Điều này làm việc cho tôi:

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

Điều này làm việc cho tôi:

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

Điều này làm việc cho tôi để sắp xếp hình ảnh vào trung tâm của div.

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