@keyframes rotate 를 했는데 중심이 이동하면서 돕니다

transform-origin 속성으로 기준점 조절가능합니다 

.cross{
    width: 50px;
    margin: 50px auto;
    font-size: 60px;
    text-align: center;
    cursor: pointer;
    transform-origin: center center;
}

^
transform-origin 속성으로 기준점 조절했음에도 가운데에서 돌아가지 않는 이유가 뭔가요??
html은 동일합니다
계속 구글링 해도 해결이 되지 않아 질문합니다

.cross:hover{
    animation-name: plus;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes plus{
    0%{
        transform: rotate(0deg);
    }

    25%{
        transform: rotate(-30deg);
    }

    100%{
        transform: rotate(45deg) scale(1.5);
    }

}

선생님! 안녕하세요 +가 위의 공간이 생기는 것은 +가 글자가 아닌 기호라서 그런 것 같은데

제가 제대로 이해한 것이 맞는 건가요?

.ani-x{
  margin: 150px auto;
  text-align: center;
  font-size: 70px;
  width: 84px;
  height: 84px;
  line-height: 84px;
  border: 1px solid #000;
  cursor: pointer;
}

맞다면 둘 다 클래스 .ani-x를 똑같이 준 것인데

+는 가운데로 보낼 수 있는 방법은 역시 없는 걸까요?

넵! 감사합니다.