Angular项目中如何将图标与图片在Flex圆形容器内居中显示

问题原因 #

你遇到的居中异常是三个CSS问题共同导致的：

• 圆形父容器.custom-file-upload设置了多余的内边距，挤压了内部内容的空间，同时破坏了70px*70px的固定尺寸
• 内部内容容器.image-content没有配置居中规则，内部的图标、图片无法对齐圆心
• 上传后的图片尺寸和父容器完全一致，加上盒模型计算偏差容易出现溢出偏移

修复代码 #

1. 替换原CSS代码

#upload-icon {
    font-size: 30px;
}

.image-content {
    width: 100%;
    height: 100%;
    /* 新增flex居中规则 */
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    /* 移除多余内边距 */
    cursor: pointer;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

img {
    border-radius: 50%;
    /* 调整尺寸避免撑满容器被边框裁剪 */
    height: 68px;
    width: 68px;
    object-fit: cover;
}

2. 可选优化HTML结构（简化冗余嵌套）

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<label class="custom-file-upload">
    <input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input"
           (change)="onChange($event)">
    <div *ngIf="!url" class="image-content">
        <i class="far fa-images"></i>
    </div>
    <img *ngIf="url" [src]="url" alt="已上传图片"/>
</label>

修改说明 #

1. 移除.custom-file-upload的内边距后，容器刚好是标准的70px*70px圆形，新增的overflow:hidden规则可以避免内容溢出圆角区域
2. .image-content设置为占满父容器宽高，搭配flex居中规则后，内部图标会自动对齐圆心
3. 图片尺寸调整为68px，刚好避开1px的边框不会被裁剪，object-fit:cover可以保证图片填满圆形区域不变形
4. 简化后的HTML结构直接利用外层label触发input点击事件，不需要内层再套label绑定for属性，逻辑更简洁

内容的提问来源于stack exchange，提问作者A. Vreeswijk