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

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

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>

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

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

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

в развернутом окне он: enter image description here

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

Спасибо.

Edit:

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

источник

2012-03-11 Tapas Bose

Попробуйте это:

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

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

источник

2012-03-11 15:47:22 StilgarBF

Спасибо за помощь. он сейчас работает, но одна проблема в светлячок го ere нет полосы прокрутки при изменении размера, но она присутствует в других браузерах. Я обновил свой вопрос. Пожалуйста, посмотри на это. –

, если вы не хотите прокрутки - просто добавьте 'overflow: hidden' в тело – StilgarBF

нет. Мне нужна полоса прокрутки, поэтому я устанавливаю' overflow: auto' в теле, но все же нет полосы прокрутки, как показано. –

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

источник

2012-03-11 15:47:29 Greg

Спасибо за помощь. теперь он работает, но одна проблема в firefox отсутствует при прокручивании полосы прокрутки, но она присутствует в других браузерах. Я обновил свой вопрос. Пожалуйста, посмотри на это. –

http://jsfiddle.net/mAVd6/2/ Это в основном отражает то, как построена ваша страница? Создает ли он полосы прокрутки в Firefox? другие браузеры? - если вы поменяете абсолютный с фиксированным, что происходит с полосами прокрутки ?! – Greg

Если я изменил положение на абсолютное до фиксированного, в панели браузера не появится ни одна полоса прокрутки. –

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

CSS

.content { 

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

источник

2012-08-07 17:49:06

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

ответ

Смежные вопросы