Как центрировать элемент в середине окна браузера? - PullRequest
Новая
       18

Как центрировать элемент в середине окна браузера?

55 голосов
/ 11 июня 2009

Как я могу поместить какой-нибудь элемент HTML (например, <div>) в середину окна браузера (не страницы, не экрана)? Не зависит от размера окна браузера, разрешения экрана, расположения панели инструментов и т. Д. Например. Я хочу, чтобы он был в середине окна браузера .

Ответы [ 18 ]

1 голос
/ 07 марта 2019

Это должно работать с любым div или размером экрана: 

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Подробнее о flex здесь . Это должно работать на большинстве браузеров, см. Матрицу совместимости здесь .

0 голосов
/ 31 мая 2018

у меня работает :). 

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
0 голосов
/ 11 июня 2009

Я не думаю, что вы можете сделать это. Вы можете находиться в середине документа, однако вы не знаете макета панели инструментов или размера элементов управления браузера. Таким образом, вы можете центрировать документ, но не посередине окна браузера.

0 голосов
/ 11 июня 2009

Если я правильно вас понял, вы хотите центрировать элемент по вертикали и горизонтали, основываясь на окне, а не на документе. Это может быть немного болезненно, но вы можете использовать javascript для определения размера окна, положения прокрутки, размера элемента и т. Д., А затем расположить элемент в центре окна (не документа, а видимого окна).

Если вы хотите, чтобы этот элемент оставался в модуле окна при прокрутке, вам нужно захватить событие прокрутки и отрегулировать положение.

Код для этого отличается от одного браузера к другому.

0 голосов
/ 11 июня 2009

Вы можете написать JavaScript, чтобы найти высоту и ширину окна и сделать его наполовину, чтобы найти центральную точку.

Добавьте содержимое внутри тега и установите верхнюю и нижнюю часть div из javascript в координаты центра, которые вы нашли с помощью Javascript.

Дайте мне знать, если вам нужен код.

0 голосов
/ 22 октября 2014

Рабочий раствор. 

<html>
          <head>
            <style type="text/css">
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            </style>
        </head>

        <body>
            Center aligned text.(horizontal and vertical side)
        </body>
</html>
0 голосов
/ 28 декабря 2013

Вы можете центрировать любой объект в окне просмотра, вот пример использования jquery 

$(document).ready(function()
{


posicionar("#midiv");
$(window).on("resize", function() {
    posicionar("#midiv");   
});

function posicionar(elemento){
    var altoDocumento = $(window).height();//alto
    var anchoDocumento = $(window).width();
    //console.log(altoDocumento);
    //console.log(anchoDocumento);
    var centroXDocumento = anchoDocumento / 2;
    var centroYDocumento = altoDocumento / 2;
    //console.log(centroXDocumemnto,centroYDocumento);
    var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
    var anchoElemento = $(elemento).outerWidth(true);//alto 

    var centroXElemento = anchoElemento / 2;// centro x del elemento
    var centroYElemento = altoElemento / 2; // centro y del elemento

    var posicionXElemento = centroXDocumento - centroXElemento;
    var posicionYElemento = centroYDocumento - centroYElemento;

    $(elemento).css("position","absolute");
    $(elemento).css("top", posicionYElemento);
    $(elemento).css("left", posicionXElemento);
}
});

HTML 

<div id="midiv"></div>

Примечание: вы должны выполнить функцию onDomReady и при изменении размера окна.

вот де jsfiddle http://jsfiddle.net/geomorillo/v82x6/

0 голосов
/ 11 июня 2009

Надеюсь, это поможет. Хитрость заключается в том, чтобы использовать абсолютное позиционирование и настроить верхний и левый столбцы. Конечно, «мертвая точка» будет зависеть от размера встраиваемого объекта / элемента, поэтому вам нужно будет поработать. Для окна входа в систему я использовал следующее - у него также есть некоторая безопасность с max-width и max-height, которая может вам пригодиться в вашем примере. Настройте приведенные ниже значения в соответствии с вашими требованиями. 

div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...