Как сохранить изображение в центре страницы независимо от размера окна браузера?

Question

Я хочу сделать это, используя только CSS + HTML. Он должен работать во всех основных / последних браузерах - пока не IE 6.

Код, который я имею, выглядит следующим образом:

<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 */  
}

Я попытался сделать позицию «абсолютной», но если размер браузера изменяется, стрелка не перемещается, и я хочу, чтобы она всегда была в центре браузера независимо от размера.

Edit:

Я хочу, чтобы он всегда был в центре этого div:

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

Это весь блок кода, который находится внутри:

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

Редактировать 2: Если решения CSS нет, решение jQuery также подойдет.

Редактировать 3: Все еще нет берущих? шишка

Answer 1

Я успешно использовал «text-align: center» для горизонтального центрирования.Для вертикального центрирования попробуйте следующее:

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

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

Cheers, Erik