Як розташувати діва в середині екрана, коли сторінка більша за екран

141

Привіт, я використовую щось подібне до наступного, щоб отримати поділ посередині екрана:

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

Однак проблема з цим полягає в тому, що він розташовує елемент на середині сторінки, а не на екрані. Отже, якщо сторінка має кілька екранів, і я перебуваю у верхній частині сторінки (верхня частина частини відображається на екрані), коли я роблю, що поділ з’являється, його немає навіть на екрані. Вам потрібно прокрутити вниз, щоб переглянути його.

Може хтось скажіть, будь ласка, як би ви зробили це в середині екрана?

— Кодер 2
джерело

Я просто перевірив цей точний код на тестовій сторінці, і він цілком зосередив діва на цій сторінці, навіть із приблизно 100, <br />перш ніж спробувати її натиснути. Можливо, спробуйте перевірити решту свого коду, щоб побачити, чи є у вас щось, що надмірно записує значення DIV або спричиняє ваш DIV, щоб викликати ці проблеми.

— Елі

269

просто додайте, 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

Ви рятуєте від життя .. Просте рішення працює добре, навіть якщо елемент застосував масштаб трансформації ..

— Vinnie

91

Я думаю, що це просте рішення:

<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
джерело

7

такий підхід набагато кращий, ніж схвалена відповідь

— В’ячеслав Добромислов

2

це сподобалось, але чи працює це у "старшому" браузері?

— BernaMariano

14

Використовуйте перетворення;

<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");

— Ердоган
джерело

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>

5

Спробуйте це.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— Чандан Шарма
джерело

1

Я думаю, цей варіант є більш корисним, тому що вам не потрібно застосовувати жодний стиль до батьківського елемента.

— canbax

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>

— Мейтрі Мальве
джерело

Питання мені задали в інтерв'ю "як ви вирівнюєте

— дівочий

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%);
}

Використання flex:

Стиль батьківського тегу повинен виглядати так:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— Алекс Джоліг
джерело

0

На сторінці сценарію ур ...

    $('.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>

Розгорніть фрагмент

— Lăng Minh
джерело

-1

ВИКОРИСТАННЯ FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
джерело

Це концентрує вміст на батьківському елементі чи сторінці, а не на екрані.

— Шон

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— Лукаш
джерело

Додайте трохи пояснень

— Панкай Маквана

-4

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

Визначте наявну висоту та положення відповідно.

— Скотт Редкліфф
джерело