以Div为容器,容器中放置一张图片,使用flex布局,x y方向都居中:
<div class="cricle" >
<img src="pic/p001.jpg" style="width:120px;border-radius: 100%;" alt="">
</div>
.cricle{
border:2px solid #ccc;
border-radius: 100%;
width:130px;
height: 130px;
display:flex;
justify-content: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
padding:20px;
}
效果: