HTML-CSS: overlapping items with same center?

Question

Inside a div I have some images that I want them to overlapp. I want all of them to have the same center and be positioned relatively to their parent div. Now, when I resize a window, I don't want them to be resized as well... How can I achieve that effect? Sorry for no code. Thank you!

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

Of course, things don't stay centered when the window is resized... Oh, I also use Foundation 5 for the grid.

Answer 1

Try using percentages in your top and left and negative margins to have it absolute center;

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