将图像粘贴到div的中心

Question

我遵循了样式="位置：绝对"和样式="位置：相对"之间的区别，其中我了解到如果外部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的全屏模式下会错位(不居中(。

在现场演示中玩一玩。

如何在PC和移动设备中获取太阳中心的图像？

---

PS：我还尝试将图像放置在div中，并在那里应用sooperIdea类，而不是在图像本身中这样做，但得到了相同的结果。

Answer 1

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以确保绝对定位的子元素相对于父元素进行定位