css：头像处理之将长方形的图片放在圆形框里居中

需求

有一批头像数据本来都是长方形的，现在要放在一个圆形的头像框内，然后就会只显示左边一半，我想要的是显示居中。

代码

<div class="top-photo"
     :style="'background-image:url(' + avatar + ')'">

.top-photo {
  width: 1.2rem;
  height: 1.2rem;
  border: solid 0.05rem #34b3de;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: 50%;
  background-color: #ddd;
}