Как разместить 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;
— АСИР ТЕРАНС РАДЖА М
источник
Это центрирует контент на родительском элементе или странице, а не на экране.
— Шон
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.