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; 
}