旋转时CSS3居中图像

Question

So the basic problem I'm having is that I want to have a rotating vortex which is positioned in the middle of their respective divs. When I try to have a transform:translate outside of the animation, it doesn't get activated, and if I try to call it within the animation, the image rotates around the top left corner. I can't seem to figure out how to both center the image vertically and horizontally, and have it rotate at the same time.

Here is the code I am working with:

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

and here is a fiddle demonstrating my problem. http://jsfiddle.net/4j7T4/

Thanks for all of the help!

Answer 1

Here is an updated fiddle .

Since the width of the div is 30px and the height is 30px, you place a margin-left and margin-top of -15px (or negative half of the width/height)

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

Another example with just a square http://jsfiddle.net/tb5Bg/

Answer 2

I would spin the div and not the image maybe. Also, I would center it differently. Try this: Are you using sass or autoprefixr? If not, you should check it out. I'm using a block element modifier for the .image-w which is good for responsive images and stuff, and a little @mxin for reuse on absolutely positioned center stuff. The margin auto does the trick as long as you specify height and width of what you want to center. Here is a codepen.

HTML

<div class="image-w spinner"><img src="http://placehold.it/400x400" alt="spinner" /></div>

SCSS

.image-w {
  //
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@mixin absolute-center {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  margin: auto;
}

.spinner {
  width: 10em;
  height: 10em;
  @include absolute-center;
  border-radius: 50%;
  overflow: hidden;
  animation: rotate 3s linear infinite 0s
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
  animation: rotate 3s linear infinite 0s
}