Центрировать позицию: фиксированный элемент - PullRequest
Новая
       70

Центрировать позицию: фиксированный элемент

365 голосов
/ 05 января 2010

Я хотел бы сделать всплывающее окно position: fixed; с центром в экран с динамической шириной и высотой. Я использовал margin: 5% auto; для этого. Без position: fixed; он прекрасно центрируется по горизонтали, но не по вертикали. После добавления position: fixed; он даже не центрируется по горизонтали.

Вот полный набор: 

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Как мне отцентрировать это поле на экране с помощью CSS?

Ответы [ 14 ]

0 голосов
/ 01 мая 2019 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

внутри него может быть любой элемент с шириной, высотой или без элемента diffenet. все по центру.

0 голосов
/ 07 января 2017

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

ширина: calc (ширина: 100% - ширина, вне зависимости от ее смещения )

Например, если ваша боковая панель навигации - 200 пикселей: 

width: calc(100% - 200px);
0 голосов
/ 05 августа 2013

Один возможный ответ : 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="/1459969/tsentrirovat-pozitsiy-fiksirovannyi-element">
        /1459969/tsentrirovat-pozitsiy-fiksirovannyi-element
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
0 голосов
/ 10 мая 2013

Единственное надежное решение - использовать таблицу align = center как в: 

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Я не могу поверить, что люди во всем мире тратят столько времени на глупое время, чтобы решить такую ​​фундаментальную проблему, как центрирование div. Решение css работает не для всех браузеров, решение jquery является программным вычислительным решением и не доступно по другим причинам.

Я много раз тратил слишком много времени, чтобы избежать использования стола, но опыт подсказывает мне прекратить бороться с ним. Используйте таблицу для центрирования div. Работает все время во всех браузерах! Никогда больше не беспокойся.

Страница:
...