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

144

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

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

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

Ответы:

270

просто добавьте, 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;
}
Хусейн
источник
1
Вы спасаете жизнь .. Простое решение работает хорошо, даже если к элементу применен масштаб трансформации ..
Винни
92

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

<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>
Развернуть фрагмент

user2684935
источник
8
этот подход намного лучше, чем утвержденный ответ
Вячеслав Добромыслов
2
очень понравился этот, но работает ли это в "старом" браузере?
BernaMariano 05
17

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

<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");
Эрдоган
источник
7

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

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

Просто положи 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>

источник
3 
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

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

Авраам
источник
2
Хотя это технически может быть правильным, вы хотите включить краткое описание того, почему это решает проблему для контекста
drneel
2

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

Парт
источник
1 
<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>
Мейтри Малв
источник
В интервью мне задали вопрос «как вы выравниваете центр div на экране?»
Мейтри Малв
1

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

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

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

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

Викаш Пандей
источник
1

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

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

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

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

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

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

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}
Алекс Джолиг
источник
1 
#div {
    top: 50%;
    left: 50%;
    position:fixed;
}

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

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

KMJ
источник
0

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

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

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

   <div class="a-middle">
Энтони Джек
источник
-1 

<!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>
Развернуть фрагмент

Лэнг Минь
источник
-1

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

display: flex;
height: 100%;
align-items: center;
justify-content: center;
АСИР ТЕРАНС РАДЖА М
источник
Это центрирует контент на родительском элементе или странице, а не на экране.
Шон
-2 
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
Лукаш
источник
Добавьте объяснение
Панкадж Маквана
-4

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

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

Скотт Рэдклифф
источник