Как HTML-элемент в окне браузера?

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

спасибо

52
center html

18 ответов

для этого вам нужно знать размер элемента центрирования. Любое измерение (например, px, em, percent), но оно должно иметь фиксированный размер.

CSS будет выглядеть следующим образом:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

редактировать: это сосредотачивается в окне просмотра. Можно только в окне браузера с помощью JavaScript. Но это может быть достаточно хорошо в любом случае, так как вы, вероятно, хотите отобразить всплывающее/модальное окно?

36

это полностью возможно только с CSS-- не требуется JavaScript: вот пример

вот исходный код этого примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>  
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>  
<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #003;
    margin: 0px
    }

#horizon        
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

.bodytext 
    {
    font-size: 14px
    }

.headline 
    {
    font-weight: bold;
    font-size: 24px
    }

#footer 
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

a:link, a:visited 
    {
    color: #06f;
    text-decoration: none
    }

a:hover 
    {
    color: red;
    text-decoration: none
    }

--></style>
</head>
<body>
<div id="horizon">
    <div id="content">
        <div class="bodytext">
        This text is<br>
        <span class="headline">DEAD CENTRE</span><br>
        and stays there!</div>
    </div>
</div>
<div id="footer">
    <a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
11

здесь:

  • HTML + CSS только решение - не требуется JavaScript
  • это не требует, чтобы вы знали размер содержимого заранее
  • содержимое стоит по центру изменения размера окна

пример:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML centering</title>

        <style type="text/css">
        <!--
        html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
        #td_wrap { vertical-align: middle; text-align: center; }
        -->
        </style>
    </head>

    <body>
        <table id="tbl_wrap"><tbody><tr><td id="td_wrap">
        <!-- START: Anything between these wrapper comment lines will be centered -->


<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>

        <!-- END: Anything between these wrapper comment lines will be centered -->
        </td></tr></tbody></table>
    </body>
</html>

взгляните на исходный URL-адрес для получения полной информации: http://krustev.net/html_center_content.html

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

11

Я удивлен, что никто не сказал о position=fixed. Он делает именно то, что я просил, и работает во всех "человеческих" браузерах и IE с 7.

10
div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
10

У меня было много проблем с центрированием и выравниванием, пока я не нашел элемента в качестве рекомендации в руководстве.

Полное руководство по Flexbox

я опубликую фрагмент (который работает с Chrome) здесь для удобства:

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

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

<body>
    This is text!
</body>

для больше деталей, пожалуйста см. статью.

4

Если вы не знаете размер браузера, вы можете просто центр в CSS следующий код:

HTML-код:

<div class="firstDiv">Some Text</div>

код CSS:

 .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }

Это также помогает в любых непредвиденных изменений в будущем.

4

чтобы выровнять div по центру, вы должны применить стиль

div 
{
    margin: 0 auto;
}
2
<div align="center">

или

<div style="margin: 0 auto;">
1

Это проверено и работает во всех браузерах.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style type="text/css">
            html, body { margin: 0; padding: 0; height: 100%; }

            #outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
            #outer[id] {display: table; position: static;}

            #middle {position: absolute; top: 50%; width: 100%; text-align: center;}
            #middle[id] {display: table-cell; vertical-align: middle; position: static;}

            #inner {position: relative; top: -50%; text-align: left;}
            #inner {margin-left: auto; margin-right: auto;}
            #inner {width: 300px; } /* this width should be the width of the box you want centered */
        </style>
    </head>
    <body>

        <div id="outer">
            <div id="middle">
                <div id="inner">
                    centered
                </div>
            </div>
        </div>

    </body>
</html>
1

Это отличный отзывчивый подход к Абсолютное Центрирование

Совместимость С Браузерами: Chrome, Firefox, Safari, мобильное сафари, IE8-10.

плюсы:

  • Кросс-браузер (включая IE8-10)
  • нет специальной разметки, минимальные стили
  • отзывчивый с процентами и min - / max -
  • используйте один класс для центра любого контента
  • центру независимо от прокладки (без коробк-загрунтовкы!)
  • блоки могут быть легко изменены
  • отлично работает на изображениях

предостережения:

  • высота должна быть объявлена (см. переменная Высота)
  • рекомендуем установить переполнение: авто для предотвращения утечки содержимого (см. переполнение)
  • не работает на Windows Phone
1

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

0

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

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

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

0

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

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

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

0

надеюсь, что это помогает. Трюк заключается в использовании абсолютного позиционирования и настройке верхнего и левого столбцов. Конечно, "мертвая точка" будет зависеть от размера объекта/div, который вы внедряете, поэтому вам нужно будет выполнить некоторую работу. Для окна входа в систему я использовал следующее - Он также имеет некоторую безопасность с 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;
}
0

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

<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

это работает для меня :).

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
0

вы можете центрировать любой объект в окне просмотра, Вот пример использования 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/

-1