垂直和水平居中CSS背景图像精灵

Question

如果没有额外的标记，我怎样才能将背景图像添加到某个高度和宽度的div（从精灵中拉出来[多个图像放在一起]），同时垂直和水平居中？当它是单个图像时它就是蛋糕：

HTML：

<div id="blog">
    <div class="circle"></div>
</div>

CSS：

#blog .circle {
    background-image: url("../img/blog.png") no-repeat center;
}

我希望使用单个精灵对所有图像实现相同的效果，同时保留居中并定义宽度和高度，以限制背景图像的大小。

Answer 1

background-image: url("../img/blog.png") no-repeat center center;

Answer 2

您应该将圆圈div的边距设置为自动。

#blog .circle {
    margin:auto auto; background-image: url("../img/blog.png") no-repeat center;
}

Answer 3

将边距设置为自动，但也设置图像宽度和高度。

示例：

.btn_arrow_right {
    background: url("../img/arrow_right.png") 0px -33px no-repeat;
    width: 19px;
    height: 33px;
    margin: auto auto;
}