How to center align a span block with a sprite with different image sizes?

Question

css

There is a code:

<ul>
  <li><span class="item1"></span></li>
  <li><span class="item2"></span></li>
  <li><span class="item3"></span></li>
</ul>

scss

ul {
  li {
    background: #262626;
    width: 109px;
    height: 109px;
    margin-left: 20px;
    list-style: none;
    border-radius: 50%;
    float: left;
    span {
     &.item1 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') 0 0 no-repeat;
          width: 70px;
          height: 52px;
          display: inline-block;
        }
      }
       &.item2 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -70px -8px no-repeat;
          width: 23px;
          height: 32px;
          display: inline-block;
        }
      }
      &.item3 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -93px 0 no-repeat;
          width: 52px;
          height: 52px;
          display: inline-block;
        }
      }
    }
  }
}

https://jsfiddle.net/0s6u1b3b/
We need to center the span block with the image in relation to li:

You can margin or position: absolute (), but if we have a lot of images in the sprite, we will need to set parameters for the skin :after ... and it's stressful :)

Answer 1

In the case of your sprite, you can use this thing for span and not think about their location:

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);