將圖像粘貼到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你看，我跟着他們中的一些絕對定位的孩子被相對定位父