Как разместить div в середине экрана, когда страница больше экрана - PullRequest
Новая
       8

Как разместить div в середине экрана, когда страница больше экрана

130 голосов
/ 16 февраля 2011

Привет, я использую что-то похожее на следующее, чтобы расположить div в середине экрана: 

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

Однако проблема в том, что он позиционирует элемент в середине страницы.не экран.Так что, если страница имеет несколько экранов в высоту, и я нахожусь в верхней части страницы (верхняя часть детали отображается на экране), когда я показываю элемент div, его даже нет на экране.Вы должны прокрутить вниз, чтобы просмотреть его.

Может кто-нибудь, пожалуйста, скажите мне, как бы вы отобразили его в середине экрана?

Ответы [ 14 ]

0 голосов
/ 13 января 2018 

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>
0 голосов
/ 25 апреля 2017

На странице сценария ур ... 

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Используйте средний класс в Div ... 

   <div class="a-middle">
0 голосов
/ 16 февраля 2011

Я только что проверил этот точный код на тестовой странице, и он идеально отцентрировал div на странице, даже с примерно 100 <br /> перед тем, как попытаться нажать на него.

Возможно, попробуйте проверить оставшуюся часть кода, чтобы увидеть, есть ли у вас что-то, перезаписывающее значения DIV или влияющее на ваш DIV, чтобы вызвать эти проблемы.

0 голосов
/ 16 февраля 2011

Для этого вам придется определить размер экрана. Это невозможно с CSS или HTML; вам нужен JavaScript. Вот запись Центра разработки Mozilla о свойствах окна https://developer.mozilla.org/en/DOM/window#Properties

Определить доступную высоту и положение соответственно.

Страница:
...