HTML-CSS：重疊的項目具有相同的中心？

Question

在div裏面我有一些圖像，我希望它們重疊。我希望他們所有人都有相同的中心，並且相對於他們的母公司。現在，當我調整一個窗口的大小時，我不希望它們被重新調整大小......我如何實現這一效果？對不起，沒有代碼。謝謝！

HTML：

<div class="columns small-6"> 
       <h4 id="label_1">Πάγωσε η κόλαση...</h4> 
       <h4 id="label_2">Μπρρρ!</h4> 
       <h4 id="label_3">Κρύο</h4> 
       <h4 id="label_4">Έτσι κ'έτσι...</h4> 
       <h4 id="label_5">Καλό</h4> 
       <h4 id="label_6">Πολύ καλό!</h4> 
       <h4 id="label_7">Κάνεις κοιλιακούς!</h4> 

       <img class="button" src="static/thermostat.png"> 
       <img class="slider unselectable" src="static/thermostat_slider.gif" draggable="false"> 
       <div class="inside"><img class="inside_thing" src="static/inside_thing.png"><h3 class="give_joke">ΔΩΣΕ!</h3></div> 

CSS：

.button { 
    position: absolute; 
    background-color: hsla(200, 0%, 0%, 0); 
    width: 100em; 
    top: 1.5em; 
} 

.slider { 
    position: absolute; 
    width: 90em; 
} 

.inside { 
    position: absolute; 
    width: 10em; 
    top: 11em; 
    left: 11.5em; 
} 

當然，當窗口大小的東西不留心...... 哦，我還用粉底5爲電網。

Answer 1

嘗試使用左右邊距中的百分比來確定絕對中心;

.inside{ 
    position: absolute; 
    width: 10em; 
    top: 50%; 
    left: 50%; 
    margin-left: -5em; 
    margin-top: -5em; 
}