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

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



спасибо

409   18  

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

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

36  
2009-06-11 19:15:46

это полностью возможно только с 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  
2009-06-11 19:24:41

здесь:

  • 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  
2012-05-10 19:31:11

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

10  
2009-06-13 18:19:59 
div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
10  
2015-06-24 17:34:17

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

Полное руководство по 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  
2013-09-08 20:41:17

Если вы не знаете размер браузера, вы можете просто центр в 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  
2015-04-14 17:46:35

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

div 
{
    margin: 0 auto;
}
2  
2009-06-11 19:20:39 
<div align="center">

или

<div style="margin: 0 auto;">
1  
2009-06-11 19:16:03

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

<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  
2009-06-11 19:38:27

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

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

плюсы:

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

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

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

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

0  
2009-06-11 19:14:49

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

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

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

0  
2009-06-11 19:19:46

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

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

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

0  
2009-06-11 19:25:40

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

div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}
0  
2009-06-11 19:37:20

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

<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  
2014-10-22 15:13:02

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

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
0  
2018-05-31 17:59:52

вы можете центрировать любой объект в видовом экране, вот пример использования 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  
2013-12-28 00:03:25

Comments

    Ничего не найдено.
Click here to cancel reply.