<分区>
<分区>
我关注了Difference between style = "position:absolute" and style = "position:relative" ，我的理解是，如果外层的div是相对定位的，那么当你将内层的div设置为绝对位置时，它会根据外层的div进行定位。
这是我的代码:
HTML:
<div class="sonar-wrapper">
<div class="sonar-emitter">
<div class="sonar-wave"></div>
</div>
<img src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1034784/android/stickers/1469060.png" height="72 " width="72 " class="sooperIdea ">
</div>
CSS:
.sooperIdea {
position: absolute;
left: 44.5%;
top: 29%;
}
/* Prevent scrollbars to appear when waves go out of bound */
.sonar-wrapper {
position: relative;
z-index: 0;
//overflow: hidden;
}
/* The circle */
.sonar-emitter {
position: relative;
margin: 32px auto;
width: 160px;
height: 160px;
border-radius: 9999px;
background-color: HSL(45, 100%, 50%);
}
但是，当我最小化浏览器的宽度(尝试模拟移动设备)时，图像无法固定在 div 的中心。如果我将它放在移动设备的中心周围，那么在 PC 的全屏模式下它就会错位(不居中)。
在 Live demo 中使用它.
如何在PC端和移动端获取太阳中心的图像？
PS:我还尝试将图像放在一个 div 中，并在那里应用 sooperIdea 类，而不是在图像本身中这样做，但得到了相同的结果。
最佳答案
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
事实上的 CSS 代码是我一直用来垂直和水平在父元素中居中的元素。
如果您将之前的定位代码删除到 .sooperIdea 类中并添加上面的代码，它就可以正常工作。
.sooperIdea {
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
/* Prevent scrollbars to appear when waves go out of bound */
.sonar-wrapper {
position: relative;
z-index: 0;
//overflow: hidden;
}
/* The circle */
.sonar-emitter {
position: relative;
margin: 32px auto;
width: 160px;
height: 160px;
border-radius: 9999px;
background-color: HSL(45, 100%, 50%);
}<div class="sonar-wrapper">
<div class="sonar-emitter">
<div class="sonar-wave"></div>
</div>
<img
src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1034784/android/stickers/1469060.png"
height="72 " width="72 " class="sooperIdea"
>
</div>请注意，我们将 position: relative 添加到父元素以确保绝对定位的子元素相对于父元素定位
关于html - 将图像粘贴到 div 的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45622725/