How do I keep an image in the center of the page regardless of browser window size?

Question

I want to do this using only CSS + HTML. It has to work in all major/latest browsers - not IE 6 just yet.

The code I have is as follows:

<div id="left_arrow"> 
        <img src="images/left-arrow.png">
    </div>

#left_arrow {
    position: absolute;
    left: 0px;          
    margin: 10px 0 15px 0;  /* top, right, bottom, left */  
    padding: 5px 5px 7px 5px;   /* top, right, bottom, left */  
}

I tried doing the position as 'absolute', but if the browser size changes the arrow doesn't move and I want it to always be at the center of the browser regardless of the size.

Edit:

I want it to always be at the center of this div:

<div id="images" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
</div>

This is the entire block of code that it is within:

<div id="compare_view" align="center">

    <div id="compv-navbar">
        <a href="#"><img src="icon1.png" id="icon1"></a> | 
        <a href="#"><img src="icon2.png" id="icon2"></a> | 
        <a href="#"><img src="icon3.png" id="icon3"></a> | 
        <span id="view_name"> text </span>
    </div>

    <div id="left_arrow"> 
        <img src="images/left-arrow.png">
    </div>

    <div id="right_arrow"> 
        <img src="images/right-arrow.png">
    </div>

    <div id="images" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
    </div>

    <div id="notice">
        Notice will be here.
    </div>

</div>

Edit 2: If there is no CSS solution, a jQuery solution is also fine.

Edit 3: Still no takers? bump

Answer 1

I've had succes using "text-align:center" for the horizontal centering. For the vertical centering, try this:

.vBox {min-height: 12em;   display: table-cell;   vertical-align: middle; }

 <div class="vBox"> <p>Lorem Ipsum is simply dummy text </p> </div>

Cheers, Erik

Answer 2

Have a look at 'Dead Centre'.