Я хотел бы сделать 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?
источник
Вот современный подход к горизонтальному центрированию элемента с динамической шириной - он работает во всех современных браузерах; поддержку можно увидеть здесь .
Обновленный пример
Для вертикального и горизонтального центрирования вы можете использовать следующее:
Обновленный пример
Вы также можете добавить дополнительные свойства с префиксом поставщика (см. Примеры).
источник
Или просто добавьте
left: 0
иright: 0
к вашему исходному CSS, что заставляет его вести себя подобно обычному нефиксированному элементу, и работает обычная техника авто-маржина:Обратите внимание, что вам нужно использовать действительный (X) HTML
DOCTYPE
для правильного поведения в IE (который у вас, конечно, должен быть в любом случае ...!)источник
right
свойства, еслиleft
оно также установлено! ( msdn.microsoft.com/en-us/library/… отмечает, чтоleft
иright
имеет только «частичную» поддержку в IE7). Хорошо, я признаю, что это решение бесполезно, если поддержка IE7 важна, но отличный трюк для запоминания на будущее :)Добавить контейнер как:
Затем положите вашу коробку в этот div сделает всю работу.
источник
display: inline-block
для этого работать. (Могут также работать некоторые другие отображаемые значения, напримерtable
.)margin:auto;
и изменение ширины наwidth:50%
илиwidth:400px
. тогда содержимое может быть прямым текстом, блочными элементами или встроенными элементами.Просто добавь:
источник
position: fixed
, о чем вопрос. Если я не прав, пожалуйста, отредактируйте свой ответ, включив в него фрагмент исполняемого кода.position: fixed
, при условии, установитьmax-width
илиwidth
элемент.внутри него может быть любой элемент с шириной, высотой или без диффузона. все сосредоточены.
источник
Это решение не требует от вас определения ширины и высоты для вашего всплывающего элемента div.
http://jsfiddle.net/4Ly4B/33/
И вместо того, чтобы вычислять размер всплывающего окна и минус половину к верху, javascript изменяет размер popupContainer, чтобы заполнить весь экран ...
(Высота 100%, не работает при использовании display: table-cell; (которая необходима для центрирования чего-либо по вертикали)) ...
Во всяком случае, это работает :)
источник
Не работал под IE7.
Изменился на
Начал работать, но в остальных браузерах перестал работать! Так использовал этот способ для IE7 ниже
источник
Вы можете в основном обернуть его в другое
div
и установить егоposition
вfixed
.источник
Я использовал
vw
(ширина области просмотра) иvh
(высота области просмотра). окно просмотра - это весь ваш экран.100vw
это общая ширина ваших экранов и100vh
общая высота.источник
Чтобы исправить положение, используйте это:
источник
Один из возможных ответов :
источник
Попробуйте использовать это для горизонтальных элементов, которые не будут правильно центрироваться.
width: calc (width: 100% - ширина, вне зависимости от ее ориентации )
Например, если ваша боковая панель навигации - 200 пикселей:
источник
Я просто использую что-то вроде этого:
Он центрирует диалоговое окно по горизонтали и вертикали для меня, и я могу использовать разную ширину и высоту, чтобы соответствовать разным разрешениям экрана, чтобы сделать его отзывчивым, с медиа-запросами.
Не вариант, если вам по-прежнему требуется поддержка браузеров, в которых пользовательские свойства CSS
calc()
не поддерживаются (проверьте caniuse.)источник
Этот работал лучше всего для меня:
источник
Единственное надежное решение - использовать таблицу align = center, как в:
Я не могу поверить, что люди во всем мире тратят столько времени на глупое время, чтобы решить такую фундаментальную проблему, как центрирование div. Решение css работает не для всех браузеров, решение jquery является программным вычислительным решением и не доступно по другим причинам.
Я много раз терял слишком много времени, чтобы избежать использования стола, но опыт подсказывает мне прекратить бороться с ним. Используйте таблицу для центрирования div. Работает все время во всех браузерах! Никогда больше не беспокойся.
источник
position:fixed
.