无法使关键帧中的图像水平居中

Question

我对自己的图像感到非常头疼。无论我做什么，它都不会水平居中。我试过将它设置为绝对和相对。设置left为50%，加入transform: translate(-50%, -50%);，设置图片显示为block，左右边距为auto.

我还能做些什么来使这个东西居中？每当我添加 transform: translate(-50%, -50%); 时，它都居中，但关键帧旋转变得异常，手没有在同一位置挥动，而是向下移动了页面。

代码片段没有完全展示它在做什么。

.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>

Answer 1

同时添加 translate() 和 rotate()。

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>

无法使关键帧中的图像水平居中

Cannot get an image in a keyframe to center horizontally

html

css

animation

css-transitions