Al rotar un div con CSS se desplaza de lugar

[jorgecanto]

Prueba a envolverlo todo en un contenedor y darle un display flex para centrar el círculo. Parece que es el translate lo que te está dando problemas.

Código CSS:

.contenedor {
  position:absolute;
  display:flex;
  width:100%;
  height:100%; 
}
div#circulo {
  margin:auto;
    width:250px; 
    height:200px;   
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-animation-name: opacidad, giro;
    -webkit-animation-duration: 2s, 2s;
    -moz-animation-name: opacidad, giro;
    -moz-animation-duration: 2s, 2s;
    animation-name: opacidad, giro; 
    animation-duration: 2s, 2s;     
}
 
@-webkit-keyframes opacidad {
    from { -webkit-opacity: 0;}
    to   { -webkit-opacity: 1;}
}
 
@-moz-keyframes opacidad {
    from { -moz-opacity: 0;}
    to   { -moz-opacity: 1;}
} 
 
@-webkit-keyframes giro {
    from { -webkit-transform: rotate(0turn);} 
    to   { -webkit-transform: rotate(15turn);}
}
 
@-moz-keyframes giro {
    from { -moz-transform: rotate(0turn);}
    to   { -moz-transform: rotate(15turn);}
}
 
div#circulo:hover {
   opacity: 0.9;
   transform: scale(1.1);
}