如何将作为 sprite sheet 一部分的 div 背景图像居中？

Question

我有一个精灵 sheet 作为 div 中的背景图片。

我想只显示一个精灵作为背景图片，同时让精灵居中。我该怎么做？

Answer 1

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

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

如果您的背景图片是水平对齐的 sprite sheet，您可以像这样将每个 sprite 垂直居中：

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

如果您的 sprite sheet 很紧凑，其中有多个行和列，则这些解决方案不适用。