html：
<div class="a"> <img src="image/aoteman.png" id="on_img"/>
</div>css:
.a { position: relative; /* 设置为相对定位 */ width: 100%; /* 你可以根据需要设置宽度 */ height: 100%; /* 你可以根据需要设置高度，或者设置一个具体的高度值 */ /* 如果你想让父元素有一个具体的尺寸，可以如下设置 */ /* width: 500px; height: 500px; */
} #on_img { position: absolute; /* 设置为绝对定位 */ top: 50%; /* 距离父元素顶部50% */ left: 50%; /* 距离父元素左侧50% */ transform: translate(-50%, -50%); /* 通过平移使图片中心对准父元素中心 */
}解释
- 父元素（
.a）的相对定位：position: relative;：这使得子元素（图片）可以相对于这个父元素进行绝对定位。width和height：根据需要设置父元素的宽度和高度。如果父元素本身没有设置具体的尺寸，它可能会根据内容自动调整大小，这可能会影响绝对定位的效果。
- 图片（
#on_img）的绝对定位：position: absolute;：这使得图片可以相对于最近的已定位（非static）祖先元素（在这里是.a）进行定位。top: 50%;和left: 50%;：这会使图片的左上角移动到父元素的中心点。但这不是我们想要的效果，因为我们想要的是图片的中心点对准父元素的中心点。transform: translate(-50%, -50%);：这个CSS属性会将图片向上和向左平移其宽度和高度的50%，从而实现图片中心对准父元素中心的效果。
