Div горизонтально в центре и вертикально

Я хочу выровнять горизонтальный центр div и вертикальную середину страницы body страницы.

css:

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

И у меня есть этот html:

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

Теперь он ведет себя так, как я этого хочу, но если я изменил размер браузера, он стал полностью искаженным, возможно, это потому, что это абсолютное позиционирование. Я показываю некоторые скриншоты: в измененном firefox: enter image description here

при изменении размера хрома: enter image description here

с измененным размером, то есть: enter image description here

в максимизированном окне: enter image description here

Есть ли способ решить эту проблему и достичь этого центрированного выравнивания, используя относительное позиционирование?

Спасибо.

Edit:

В Firefox нет полосы прокрутки при изменении размера, но она появляется в других браузерах. enter image description here

Ответы

Ответ 1

Попробуйте следующее:

.loginDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
    margin-left: -273px; /*half width*/
    margin-top: -132px; /*half height*/
}

Вы перемещаете его в центр, а затем назад и вверх на половину размеров - это будет центрировать его даже при изменении размера

Ответ 2

Сделайте div, который предназначен для содержимого страницы, и создайте класс "content" со следующим css. Это работало для меня на JQuery Mobile с помощью Phonegap для устройств Android. Надеюсь, это поможет кому-то.

CSS

.content {

        width: 100%;
        height: 100%;
        top: 25%;
        left: 25%
        right: 25%;
        text-align: center;
        position: fixed;
}

Ответ 3

#div {
    height: 200px;
    width: 100px;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
}

Это общий метод центрирования div. Вы позиционируете его абсолютно, затем перемещаете его на полпути и на полпути вниз. Затем отрегулируйте положение с полями на половину размеров div, которые вы позиционируете.

Для справки (это использует фиксированное позиционирование, хотя держать div на месте даже при прокрутке, полезно при создании модальных всплывающих окон. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/