html - CSS3 旋转时图像居中

Question

所以我遇到的基本问题是我想要一个旋转漩涡，它位于各自 div 的中间。当我尝试在动画之外进行转换:平移时，它不会被激活，如果我尝试在动画内调用它，图像会围绕左上角旋转。我似乎不知道如何使图像垂直和水平居中，并同时旋转。

这是我正在使用的代码:

div img
{
    position: absolute;
    display:block;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    margin: auto;
    width:auto;
    height: auto;
    max-height: 70%;
    max-width: 70%;




    -webkit-animation: rotate 3s linear infinite 0s;
    -moz-animation: rotateup 3s linear infinite 0s;
    -o-animation: rotate 3s linear infinite 0s;
    -ms-animation: rotate 3s linear infinite 0s;
    animation: rotate 3s linear infinite 0s
}

@-webkit-keyframes rotate {
 from {
     -webkit-transform: rotate(0deg);
}
to {
      -webkit-transform: rotate(360deg);                                 
}

这是一个演示我的问题的 fiddle 。 http://jsfiddle.net/4j7T4/

感谢大家的帮助!

Answer 1

这是更新的fiddle .

由于 div 的宽度为 30px，高度为 30px，因此您将 margin-left 和 margin-top 设置为 -15px(或宽度/高度的负一半)

{
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
}

另一个只有正方形的例子 http://jsfiddle.net/tb5Bg/