请描述使用 CSS 完成圆形头像裁剪的具体做法，同时确保图片在容器中始终居中呈现。

回答思路

1. 【回答框架 1】圆形裁剪的核心是利用 border-radius 属性，将其设为 50% 或足够大的像素值，使元素呈现为圆形；同时设置 overflow: hidden，超出圆形的部分会被隐藏，从而实现头像裁剪。
2. 【回答框架 2】为保证图片居中显示，常见方案是让图片作为块级元素并设置 margin: 0 auto，或者将容器设为 display: flex 并使用 align-items: center 与 justify-content: center，再配合 object-fit: cover 和固定宽高，让图片完整覆盖且不拉伸。
3. 【回答框架 3】还可以使用绝对定位，将图片的 top、left 设为 50%，再通过 transform: translate(-50%, -50%) 偏移回去，适用于容器尺寸不固定的场景。
4. 【回答框架 4】对于响应式场景，可使用百分比宽度或 vw 单位，配合 aspect-ratio: 1 保持正方形比例，避免圆形变形。
5. 【关键点 1】border-radius: 50% 配合 overflow: hidden 是实现圆形裁剪的基础。
6. 【关键点 2】flex 布局设置 align-items 和 justify-content 为 center，能简单可靠地让图片居中。
7. 【关键点 3】object-fit: cover 可让图片在容器内等比填充并居中裁切，避免拉伸变形。
8. 【易错点 1】只用 border-radius: 50% 而不设置 overflow: hidden 时，图片四个角依然会显示，无法真正裁剪成圆形。
9. 【易错点 2】容器没有固定宽高时，图片可能无法撑满容器，导致圆形显示不完整或变形。
10. 【易错点 3】如果用绝对定位居中但忘记 transform 偏移，图片会偏在右下角。