页面缩放时圆形元素内复选标记偏移的修复方案咨询

问题 #

调整页面尺寸时，类名为.circle的圆形元素大小保持不变，但内部的复选标记图片会向下偏移，需要让图片始终与圆形保持相对居中定位。

原因分析 #

当前代码存在两个核心问题：

1. 圆形容器用vh单位，图片混用vw和vh单位，视口尺寸变化时，两者缩放比例不一致，导致位置偏移
2. 仅靠vertical-align: middle无法在容器内稳定居中，不同视口下的基线计算逻辑会引发偏移

修复方案 #

给.circle添加Flex布局，利用Flex的居中特性实现图片的稳定定位，同时统一图片的相对单位，避免混合单位导致的比例问题：

修改后的CSS代码 #

.circle{
    background-color: #bbb;
    height: 3.7vh;
    width: 3.7vh;
    margin-left: 1.25vw;
    border-radius: 50%; /* 用50%比50vw更适合实现正圆形，避免极端视口变形 */
    display: inline-flex; /* 保留行内特性同时启用flex布局 */
    align-items: center; /* 垂直居中内部元素 */
    justify-content: center; /* 水平居中内部元素 */
}

img{
    width: 22.4%; /* 用相对于容器宽度的百分比，替代固定vw/vh，保持比例 */
    height: auto; /* 自动按比例计算高度，避免拉伸变形 */
}

改动说明 #

• 将.circle的display从inline-block改为inline-flex，既保留行内元素特性，又能通过Flex属性轻松实现内部元素居中
• 添加align-items: center和justify-content: center，让图片在圆形容器内始终水平垂直居中
• 图片用百分比宽度替代vw/vh混合单位，确保图片尺寸始终和圆形容器成固定比例，不会因视口变化错位
• 圆形的border-radius改为50%，比50vw更适合实现正圆形，避免在极端宽高比的视口下变形

效果验证 #

调整页面尺寸时，图片会始终保持在圆形容器的中心位置，不会出现偏移问题。

内容的提问来源于stack exchange，提问作者fetixzz