На этот вопрос уже есть ответы здесь:
Я хочу выровнять 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:
Теперь он ведет себя так, как я хочу, но если я изменяю размер браузера, он становится полностью искаженным, возможно, это из-за абсолютного позиционирования. Показываю некоторые скриншоты:
в Firefox с измененным размером:
в хроме с измененным размером:
в измененном размере, т.е.:
в развернутом окне это:
Есть ли способ решить эту проблему и добиться выравнивания по центру с помощью относительного позиционирования?
Спасибо.
Редактировать:
В firefox полоса прокрутки не появляется при изменении размера, но она появляется в других браузерах.
