将精灵居中作为 div 背景

Question

我有一个按钮，其中包含一个设置为 div 的背景图像的精灵。精灵表水平排列。请注意，源图像也会按比例缩小以适合 div。

.button {
    background: url(sprite.png);
    background-size: auto 100%;
    width: 100px;
    height: 100px;
    background-position: 0px 50%;
}

.play {
    background-position: 0px;
}

.pause {
    background-position: -100px;
}

我希望按钮在单击时略微缩小，如下所示：

.button:active {
    background-size: auto 95%;
}

但是，这会使按钮向左边缘收缩。 我怎样才能使图像居中，同时尊重精灵的位置偏移？

理想情况下，解决方案将独立于大小，因此如果 div 尺寸发生变化或动态设置，相同的样式将起作用。但是，我什至很难通过手动解决方案来获得预期的效果，例如：

.play:active {
    background-position: 3px 50%;
}

.pause:active {
    background-position: -97px 50%;
}

编辑

修复了引用代码中的一些偶然错误。

Answer 1

.button {
    background: url("sprite.png");
    background-position: center;
    background-size: auto 100%;
    width: 100px;
    height: 100px;
}

.button:active {
    background-size: auto 95%;
}

这行得通吗？