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

Подскажите, пожалуйста, как бы вы сделали так, чтобы оно появилось посередине экрана?


html css center window
person Coder 2    schedule 16.02.2011    source источник
comment
Я только что протестировал этот точный код на тестовой странице, и он идеально выровнял div по центру страницы, даже с примерно 100 <br /> перед тем, как попытаться сдвинуть его вниз. Возможно, попробуйте проверить остальную часть вашего кода, чтобы увидеть, есть ли у вас что-то, что либо перезаписывает значения DIV, либо влияет на ваш DIV, вызывая эти проблемы.   -  person Eli    schedule 16.02.2011

Ответы (15)


arrow_upward
280
arrow_downward

просто добавьте 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;
}
person Hussein    schedule 16.02.2011
comment
Вы спасаете жизнь .. Простое решение работает хорошо, даже если к элементу применен масштаб трансформации. - person Vinnie; 19.11.2015

arrow_upward
98
arrow_downward

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

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

person user2684935    schedule 01.08.2013
comment
этот подход намного лучше, чем утвержденный ответ - person Viacheslav Dobromyslov; 13.09.2013
comment
полюбил этот, но работает ли это в старых версиях браузера? - person BernaMariano; 05.02.2014

arrow_upward
18
arrow_downward

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

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

Решение Javascript:

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");
person Erdogan    schedule 27.11.2015

arrow_upward
13
arrow_downward

Попробуй это.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
person Chandan Sharma    schedule 03.10.2019
comment
Я думаю, что это более полезно, потому что вам не нужно применять какой-либо стиль к родительскому элементу. - person canbax; 11.03.2020

arrow_upward
6
arrow_downward

Просто поставьте 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>
person Community    schedule 03.02.2014

arrow_upward
4
arrow_downward 

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

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

person Abraham    schedule 19.03.2016
comment
Хотя технически это может быть правильно, вы хотите включить краткое описание того, почему это решает проблему для контекста. - person drneel; 20.03.2016

arrow_upward
2
arrow_downward

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

person Parth    schedule 31.10.2015

arrow_upward
1
arrow_downward

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

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

<!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 загрузки всегда будет по центру.

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

person Vikash Pandey    schedule 21.06.2017

arrow_upward
1
arrow_downward

Два способа разместить тег в середине экрана или его родительский тег:

Использование позиций:

Установите для родительского тега position значение relative (если целевой тег имеет родительский тег), а затем установите стиль целевого тега следующим образом:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Использование гибкости:

Стиль родительского тега должен выглядеть так:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
person Alex Jolig    schedule 28.09.2019

arrow_upward
1
arrow_downward 

#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

просто установите указанные выше три свойства для любого вашего элемента, и готово!

Ваш div находится точно в центре экрана

person KMJ    schedule 25.09.2020

arrow_upward
0
arrow_downward

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

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

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

   <div class="a-middle">
person Antony Jack    schedule 25.04.2017

arrow_upward
-1
arrow_downward

ИСПОЛЬЗОВАНИЕ FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;
person ASIR THERANS RAJA M    schedule 21.02.2020
comment
Это центрирует контент по родительскому элементу или странице, а не по экрану. - person Sean; 21.02.2020

arrow_upward
-4
arrow_downward

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

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

person Scott Radcliff    schedule 16.02.2011

arrow_upward

arrow_downward

person    schedule
comment
В интервью мне задавали вопрос, как вы выравниваете центр div на экране? - person Maitrey Malve; 15.02.2017

arrow_upward

arrow_downward

person    schedule
comment
Добавьте объяснение - person Pankaj Makwana; 21.06.2018