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

Я хотел бы сделать 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?

330
centering css css-position

12 ответов

вам в основном нужно установить top и left to 50% для центрирования левого верхнего угла div. Вам также необходимо установить margin-top и margin-left к отрицательной половине высоты и ширины div для того чтобы перенести центр к середине div.

таким образом, при условии <!DOCTYPE html> (стандартный режим), это должно сделать:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

или, если вы не заботитесь о центрировании по вертикали и старых браузеров, таких как IE6 / 7, то вы можете вместо этого также добавить left: 0 и right: 0 к элементу, имеющему margin-left и margin-right of auto, так что фиксированный расположенный элемент с фиксированной шириной знает, где начинаются его левые и правые смещения. В вашем случае так:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

опять же, это работает только в IE8+, если вы заботитесь об IE, и это центры только по горизонтали, а не по вертикали.

492

Я хочу сделать всплывающее окно по центру экрана с динамической шириной и высотой.

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

Обновленный Пример

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

и для вертикальный и горизонтальный центризовать вы смогли использовать следующий:

Обновленный Пример

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

вы также можете добавить дополнительные свойства префикса поставщика (см. примеры).

195

или просто добавить left: 0 и right: 0 к вашему исходному CSS, который заставляет его вести себя аналогично регулярному нефиксированному элементу, и работает обычная техника автоматического поля:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Примечание необходимо использовать допустимый (X)HTML DOCTYPE для его правильного поведения в IE (который вы, конечно, должны иметь в любом случае..!)

126

добавить контейнер, как:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

затем поместите свою коробку в этот div будет делать работу.

20

просто добавить:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
10

Это решение не требует от вас определения ширины и высоты вашего всплывающего div.

http://jsfiddle.net/4Ly4B/33/

и вместо того, чтобы вычислять размер всплывающего окна и минус половина сверху, javascript изменяет размер popupContainer, чтобы заполнить весь экран...

(высота 100%, не работает при использовании дисплея: таблица-ячейка; (который требуется, чтобы центрировать что-то вертикально))...

в любом случае это работает :)

5
left: 0;
right: 0;

не работал под IE7.

изменено на 

left:auto;
right:auto;

начал работать, но в остальных браузерах он перестанет работать! Поэтому используется этот способ для IE7 ниже

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
4

вы можете в основном обернуть его в другой div и установить его position to fixed.

.bg {
  position: fixed;
  width: 100%;
}

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

чтобы исправить положение, используйте это : -

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
1

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

<!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="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </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

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

ширина: calc (ширина: 100% -ширина все остальное не центрирует его)

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

width: calc(100% - 200px);
0

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

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

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

-11