Question

我对自己的形象感到头疼。无论我做什么，它都不会水平居中。我试过把它设置为绝对和相对。将左侧设置为50％，添加subdomain，将图像设置为块，左侧和右侧的边距为自动。

我还能做些什么让这件事情中心化？每当我添加transform: translate(-50%, -50%);时，它都会居中，但关键帧旋转完全没有了，而不是手在同一位置挥动，手向下移动。

该代码段并未完全展示它正在做什么。

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

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>

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

1 个答案: