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

Привет, я использую что-то похожее на следующее, чтобы получить 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, это не даже на экране. Вам необходимо прокрутить вниз, чтобы просмотреть его.

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

99
16 февр. '11 в 6:06
источник поделиться
12 ответов

просто добавьте position:fixed, и он будет держать его в поле зрения, даже если вы прокрутите вниз. см. http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    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;
}
210
16 февр. '11 в 6:24
источник

Связанные вопросы


Похожие вопросы

Я думаю, что это простое решение:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>
67
01 авг. '13 в 17:00
источник

Если вы знаете размер элемента, вы можете просто использовать свойство margin:

#mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Примечание, что вы должны использовать половину ширины и высоты элемента

Но если вы не уверены в размере, это будет делать трюк:

#mydiv {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
24
08 марта '16 в 10:34
источник

Использовать преобразование;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Javascript Solution:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
9
27 нояб. '15 в 19:46
источник

Просто поместите margin:auto;  

#mydiv {
    margin:auto;
    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;
}

<div id="mydiv">Test Div</div>
5
03 февр. '14 в 23:29
источник

Короткий ответ. Просто добавьте position:fixed, и это решит вашу проблему.

2
31 окт. '15 в 9:54
источник
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Это сработало для меня

2
20 марта '16 в 2:27
источник
<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
1
15 февр. '17 в 14:22
источник

В ur script странице...

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

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

   <div class="a-middle">
0
25 апр. '17 в 7:57
источник

Хорошо, ниже приведен рабочий пример для этого.

Это будет обрабатывать центральное положение, если вы измените размер веб-страницы или загрузите ее в любом формате.

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

В приведенном выше примере загрузка div всегда будет в центре.

Надеюсь, это поможет вам:)

0
21 июня '17 в 16:59
источник

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

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

-1
16 февр. '11 в 6:20
источник

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

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

-3
16 февр. '11 в 6:20
источник

Посмотрите другие вопросы по меткам или Задайте вопрос