HTML-CSS：具有相同中心的重叠项目？

Question

在一个 div 中，我有一些我希望它们重叠的图像。我希望它们都具有相同的中心并相对于它们的父 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;
}

当然，调整窗口大小时，事物不会保持居中... 哦，我也用Foundation 5来做网格。

Answer 1

尝试在顶部和左侧使用百分比以及负边距使其绝对居中；

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