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

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

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 ]

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

Вам необходимо установить top и left на 50%, чтобы центрировать левый верхний угол элемента. Вам также нужно установить 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 из 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, и это центрируется только горизонтально, а не вертикально.

257 голосов
/ 14 сентября 2014

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

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

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

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

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

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

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

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

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

Или просто добавьте 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 (который у вас, конечно, должен быть в любом случае ..!)

21 голосов
/ 14 июля 2012

Добавьте контейнер, например: 

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

Затем поместите вашу коробку в этот div и сделайте всю работу.

14 голосов
/ 08 марта 2017

Просто добавьте: 

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
5 голосов
/ 07 марта 2012

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

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

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

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

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

4 голосов
/ 22 декабря 2011 
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'});
}
2 голосов
/ 11 ноября 2017

Вы можете просто обернуть его в другой div и установить для position значение 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>
1 голос
/ 05 апреля 2019

Я использовал vw (ширина области просмотра) и vh (высота области просмотра). окно просмотра - это весь ваш экран. 100vw - общая ширина ваших экранов, 100vh - общая высота. 

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
1 голос
/ 27 сентября 2018

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

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
Страница:
...