相对定位和绝对定位,使得图片在中间 ( html css )
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%,从而实现图片中心对准父元素中心的效果。