将图像粘贴到div的中心

Question

我跟着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类在那里，而不是图像本身这样做，但得到了同样的结果。

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父元素，以确保@Rob你看，我跟着他们中的一些绝对定位的孩子被相对定位父