如何将作为精灵表一部分的div背景图像居中？

Question

我有一张精灵表作为div内的背景图片。

我想只显示一个精灵作为背景图像，但也是精灵的中心。我怎么能这样做？

Answer 1

如果您的背景图像是垂直对齐的精灵表，您可以像这样水平居中每个精灵：

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

如果你的背景图像是水平对齐的精灵表，你可以像这样垂直居中每个精灵：

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

如果您的精灵表是紧凑的，有多个行和列，则这些解决方案不适用。