如何实现div内图片居中且按钮位于右上角？

你的问题根源在于绝对定位元素的参考容器设置：绝对定位元素默认会以最近的非static定位（即设置了relative/absolute/fixed/sticky）的父元素作为定位基准，而你的#container默认是position: static，所以按钮才会相对于整个窗口定位。

只需给父容器#container添加position: relative，就能让按钮相对于容器右上角定位，同时不影响图片的居中布局。

修改后的CSS代码：

#container {
  display: flex;  
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  border: 2px solid #1877f2;
  width: 500px;
  height: 200px;
  margin-bottom: 16px;
  position: relative; /* 添加这一行 */
} 
#button {
  line-height: 12px;
  width: 18px;
  font-size: 8pt;
  font-family: tahoma;
  margin-top: 1px;
  margin-right: 2px;
  position:absolute;
  top:0;
  right:0;
}

HTML代码无需修改：

<div id="container">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
  <input id="button" type="radio" value="X"/>
</div>

关键改动说明：

• #container添加position: relative后，成为内部绝对定位元素的定位上下文
• Flex布局的justify-content: center和align-items: center依然能让图片在容器内水平垂直居中
• 按钮的position: absolute配合top: 0、right: 0，会紧贴容器的右上角位置

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