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

439

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

css  css-position  centering 
— saturngod
источник

Ответы:

606

Вы в основном нужно установить topи leftв 50%центрировать левом верхнем углу дел. Кроме того, необходимо установить margin-topи margin-leftв отрицательную половину высоты и ширины Див на смещение центра по направлению к середине дел.

Таким образом, при условии <!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к элементу, имеющему a margin-leftи margin-rightof 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, и это центрируется только по горизонтали, а не по вертикали.

— BalusC
источник
8
Я обнаружил , что трюк в css-tricks.com/... . Но когда я изменяю ширину и высоту, это не смещение центра. Я должен изменить поля left и top при изменении высоты и ширины.
— Saturngod
2
К вашему сведению: это правильно расположит вещи посередине, но, к сожалению, вы потеряете полосы прокрутки - любой контент, обрезанный в области просмотра, будет недоступен, даже если вы прокрутите, потому что фиксированная позиция основана на области просмотра, а не на стр. Пока что единственное решение, которое я нашел, - это JavaScript.
— Groxx
3
Groxx Я думаю, что вы можете поместить полосы прокрутки в div во всплывающем окне, используя свойство overflow .
— Дэвид Винецки
1
Кроме того, для этого вам нужно знать ширину элемента.
— Гектор Ордоньес
2
ах. Если это так, я имею в виду, конечно, размер браузера будет динамическим, не уверен, почему это было в вопросе. вместо этого я думал, что он имел в виду, что всплывающие измерения должны быть динамическими. Это тот случай, когда я использую transform: translate (-50%, -50%); прекрасно работает, кроме как на IE8.
— ночи
324

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

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

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

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

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

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

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

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

— Джош Крозье
источник
1
Я использую этот подход для горизонтального центрирования фиксированного позиционированного изображения, ширина которого больше ширины окна и работает как минимум в текущих версиях Firefox, Chrome, IE 11 и Edge.
— Джелхан
1
В моем тестировании это работает очень хорошо (за префиксами), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome. Единственным провалом для меня был Android 4.0, где перевода не было.
— Данджа
2
@ahnbizcad, это работает в настольных браузерах, таких как Chrome 61, Safari 11 и FireFox 65, но не в Chrome 61 на Android 6, принятый ответ работает во всех браузерах.
— Эрик Барке
5
Это делает изображения размытыми в Chrome.
— Томаш П. Шинальски
1
Каким-то образом только подход, который работал правильно во всех браузерах с моим img. Огромное спасибо!
— Кугельфиш
136

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

— Уилл Прескотт
источник
2
В каком смысле? Родительским элементом является элемент body, у которого нет границ. Если вы добавили свойства границ к телу (?!), То наверняка это повлияет, как и метод 50%, который я представляю. Уверяю вас, он прекрасно работает с данными параметрами, только что проверен в каждом браузере, который мне удобен, и имеет дополнительное преимущество - он не зависит от ширины элемента.
— Уилл Прескотт
5
Все, что я сделал, это добавил эти 2 свойства и тип документа в пример HTML для OP. Однако при дальнейшем тестировании кажется, что IE7 (или 8 в режиме Compat) является проблемой - кажется, он не учитывает значение rightсвойства, если leftоно также установлено! ( msdn.microsoft.com/en-us/library/… отмечает, что leftи rightимеет только «частичную» поддержку в IE7). Хорошо, я признаю, что это решение бесполезно, если поддержка IE7 важна, но отличный трюк для запоминания на будущее :)
— Уилл Прескотт
7
это должен быть принятый ответ. У меня было два фиксированных положения, одно для маски непрозрачности, другое для модального. это был единственный способ, которым я мог центрировать фиксированное модальное положение в центре экрана. Удивительный ответ, кто бы мог подумать?
— Крис Хоукс
3
Я согласен, это должен быть принятый ответ. Он отлично работает и в адаптивном дизайне, так как не зависит от ширины.
— Гектор Ордоньес,
7
Я бы предложил упростить ответ, так как некоторые из css актуальны только для OP. Все, что вам нужно, это позиция: фиксированная; слева: 0; справа: 0; поле: 0 авто; ,
— Гектор Ордонез,
23

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

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

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

— Ромул Уракаги Цай
источник
«text-align: center» не работал для меня в центрировании внутреннего div.
— Нима
2
Внутренняя коробка должна быть display: inline-blockдля этого работать. (Могут также работать некоторые другие отображаемые значения, например table.)
— Brilliand
лучшим подходом к вышеупомянутому CSS будет добавление margin:auto;и изменение ширины на width:50%или width:400px. тогда содержимое может быть прямым текстом, блочными элементами или встроенными элементами.
— Джошуа Бернс
20

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

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— боб
источник
1
Это не работает position: fixed, о чем вопрос. Если я не прав, пожалуйста, отредактируйте свой ответ, включив в него фрагмент исполняемого кода.
— Flimm
1
он отлично работает с фиксированной позицией.
— Phuhui
1
Это работает с position: fixed, при условии, установить max-widthили widthэлемент.
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

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

— praffessorr
источник
5

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

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

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

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

Во всяком случае, это работает :)

— BjarkeCK
источник
4 
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'});
}
— Jatinder
источник
Вы не против отредактировать свой ответ, чтобы включить все решение?
— Flimm
Это не будет работать без автоматического поля слева и справа.
— RoM4iK
2

Вы можете в основном обернуть его в другое 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>
Развернуть фрагмент

— Абдулла Дльшад
источник
2

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

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— Асим
источник
1

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

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— HeadAndTail
источник
3
Пожалуйста, предоставьте объяснение того, почему ваше решение подойдет для опубликованного вопроса.
— Шехар Чикара
0

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

<!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>
— Мартин Вахи
источник
Это, кажется, работает, хотя требует, чтобы вы уже знали ширину и высоту элемента.
— Flimm
0

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

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

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

width: calc(100% - 200px);
— Роберт Росс
источник
0

Я просто использую что-то вроде этого:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

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

Не вариант, если вам по-прежнему требуется поддержка браузеров, в которых пользовательские свойства CSS calc()не поддерживаются (проверьте caniuse.)

— Фабьен Снауварт
источник
0

Этот работал лучше всего для меня:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
источник
-13

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

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

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

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

— Чонг
источник
11
Это не отвечает на вопрос вообще. Там нет не CSS-эквивалент position:fixed.
— Brilliand
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.