html - Cannot get an image in a keyframe to center horizontally -

i having huge headache image have. not center horizontally no matter do. have tried setting absolute , relative. setting left 50%, adding in transform: translate(-50%, -50%);, setting image display block margin on left , right auto.

what else can thing centered? whenever added transform: translate(-50%, -50%);, centered, keyframe rotate got out of wack , instead of hand waving in same position, hand moved down page.

the snippet not demonstrate doing.

.red {    background-color: #0085a1;    width: 100%;    height: 100vh;    position: relative;    text-align: center;  }    .hand {    width: auto;    height: auto;    position: absolute;    display: inline-block;    vertical-align: top;    text-align: center;    position: absolute;    /*transform: translate(0, -50%);*/    /*transform: translate(-50%, -50%);*/    top: 50%;    left: 50%;    margin-right: -50%;    -webkit-animation: wave 4s 1 normal forwards;    animation: wave 4s 1 normal forwards;  }    img.hand {    display: block;    margin-left: auto;    margin-right: auto;  }    @keyframes wave {    50% {      -ms-transform: rotate(75deg);      /* ie 9 */      -webkit-transform: rotate(75deg);      /* chrome, safari, opera */      transform: rotate(75deg);    }    90%,    100% {      opacity: 0    }  }

<div class="red">    <img class="hand" alt="hello">  </div>

add both translate() , rotate() @ same time.

jsfiddle

.red {    background-color: #0085a1;    width: 100%;    height: 100vh;    position: relative;  }  .hand {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%) rotate(0deg);    animation: wave 4s 1 normal forwards;  }  @keyframes wave {    50% {      transform: translate(-50%, -50%) rotate(75deg);    }    100% {      opacity: 0    }  }

<div class="red">    <img src="http://i.imgur.com/ywcrl0a.png" class="hand" alt="hello">  </div>