How do I center a group of divs that stay centered if you change your resolution

I have to make a website for school and I'd like to know how to align these divs to the center so that the distance between them as it is now stays the same whatever you do but when you enlarge your browser window they stay centered at the bottom of the page as a group. Can anyone help me?

<div id="thing 1">
   <div style="position: absolute; bottom: 0px; left: 220px; width: 300px;">
   <img border="0" src="thing 1" alt="awesome thing 1" width="296,4" height="464,5">
</div>

<div id="thing 2">
   <div style="position: absolute; bottom: 0px; left: 470px; width: 300px;">
   <img border="0" src="thing 2" alt="awesome thing 2" width="228" height="357,3">
</div> 

<div id="thing 3">
   <div style="position: absolute; bottom: 0px; left: 700px; width: 300px;">
   <img border="0" src="thing 3" alt="awesome thing 3" width="90" height="400">
</div> 

<div id="thing 4">
   <div style="position: absolute; bottom: 0px; left: 820px; width: 300px;">
   <img border="0" src="thing 4" alt="awesome thing 4" width="200" height="380">
</div>

Solution

All you need to do is leave the images in one div and add text-align: center styling to it:

HTML:

<div id="thing_1">
    <img border="0" src="thing 1" alt="awesome thing 1" width="296,4" height="464,5">
    <img border="0" src="thing 2" alt="awesome thing 2" width="228" height="357,3">
    <img border="0" src="thing 3" alt="awesome thing 3" width="90" height="400">
    <img border="0" src="thing 4" alt="awesome thing 4" width="200" height="380">
</div>

CSS:

#thing_1 {
    text-align: center;
}

Example