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

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>