元素在圆形的背景下如何响应式居中？

Question

如何让如图的风扇在圆环背景下居中

 #fan{

        width: 90px;

    height: 90px;

    background-size: contain;

    background-repeat: no-repeat;

    animation: blades 1s infinite linear;

    background-image: url(1.png);

    transform-origin: 40% 50%;

      }

        @keyframes blades{

    from{

        transform: rotate(0deg);

    }

    to{

        transform: rotate(360deg);

    }

}

.bg {

    width: 2rem;

    height: 2rem;

    background-repeat: no-repeat;

    background-image: url(2.png);

}

<div class="bg">

    <div id = "fan"></div>

    </div>