Центрируйте положение: неподвижный элемент
https://stackoverflow.com/questions/2005954
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я хотел бы сделать 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?
Решение
Вам нужно установить top а также left к 50% Центр левого уголка Div. Вам также нужно установить 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 к элементу, имеющему 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, и это сосредоточено только горизонтально не вертикально.
Другие советы
Я хочу сделать всплывающую коробку с центром на экране с динамической шириной и высотой.
Вот современный подход для горизонтальной центрирования элемента с динамической шириной - он работает во всех современных браузерах; Поддержка можно увидеть здесь.
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
Как для вертикального, так и для горизонтального центрирования вы можете использовать следующее:
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Вы можете также добавить больше префиксов поставщиков, которые также (см. Примеры).
Или просто добавьте 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 (что, конечно, должно иметь, конечно,!)
Добавьте контейнер как:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Затем поместите свою коробку в этот Div, сделайте работу.
Просто добавь:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Это решение не требует от вас, чтобы определить ширину и высоту для вашего всплывающего Div.
И вместо расчета размера всплывающего окна и минус наполовину вверх JavaScript изменяет размер всплывающего контейнера, чтобы заполнить весь экран ...
(Высота 100%, не работает при использовании дисплея: табличная клетка; (Wich требуется для того, чтобы центрировать что-то вертикально)) ...
В любом случае это работает :)
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'});
}
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Внутри это может быть любой элемент с шириной Diffenet, высотой или без. Все центрированы.
Вы можете в основном обернуть его в другой 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>Чтобы исправить позицию, используйте это:-
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
я использовал vw (Ширина просмотра) и vh (Высота просмотра). Viewport - это весь экран. 100vw Ваши экраны общая ширина и 100vh это общая высота.
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
Один возможный отвечать:
<!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>
Попробуйте использовать это для горизонтальных элементов, которые не будут правильно сосредоточиться.
Ширина: Calc (ширина: 100% - ширина, что еще не сосредоточено на ней)
Например, если ваша боковая навигационная панель составляет 200 пикселей:
width: calc(100% - 200px);
Единственное надежное решение - использовать table align=center, как в:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
Я не могу поверить, что люди во всем мире тратят такое обильное количество глупого времени на решение такой фундаментальной проблемы, как центрирование div.решение css работает не для всех браузеров, решение jquery является программным вычислительным решением и не подходит по другим причинам.
Я неоднократно тратил слишком много времени впустую, чтобы избежать использования table, но опыт подсказывает мне перестать бороться с этим.Используйте таблицу для центрирования div.Работает постоянно во всех браузерах!Никогда больше не волнуйся.
