如何用CSS在flex居中的图片右上角添加图标？

完全可以用CSS实现，核心思路是给图片套一个相对定位的容器，把图标设置为绝对定位并固定在容器的右上角，这样不管视口怎么缩放，图标都会始终贴在图片的右上角。

修改后的代码示例：

<!-- 模拟可缩放的视口 -->
<div style="resize: both; overflow: auto; width: 192px; height: 108px;">
  <!-- Flex居中容器 -->
  <div style="background-color: #AAA; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;">
    <!-- 包裹图片和图标的相对定位容器 -->
    <div style="position: relative;">
      <img style="max-height: 100%; max-width: 100%;" src="https://placekitten.com/800/600">
      <!-- 右上角图标，这里用文本示例，也可以替换为图标图片 -->
      <span style="position: absolute; top: 4px; right: 4px; background-color: rgba(255,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px;">NEW</span>
    </div>
  </div>
</div>

关键细节说明：

• 包裹图片的<div>设置position: relative，是为了让内部图标以这个容器为定位基准，而非整个视口
• 图标元素（示例用<span>）设置position: absolute; top: 4px; right: 4px;，就能固定在容器右上角，调整top和right的值可控制图标与图片边缘的间距
• 这个包裹容器无需设置宽高，会被内部图片自动撑开，同时Flex布局会让整个容器（图片+图标）保持在视口中央
• 如果要用图标图片代替文本，直接把<span>换成<img>并设置合适宽高即可

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