Центрировать положение: фиксированный элемент
Я хотел бы сделать 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?
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, и это центры только по горизонтали, а не по вертикали.
Я хочу сделать всплывающее окно по центру экрана с динамической шириной и высотой.
вот современный подход для горизонтального центрирования элемента с динамической шириной-он работает во всех современных браузерах;поддержка можно посмотреть здесь.
.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 изменяет размер popupContainer, чтобы заполнить весь экран...
(высота 100%, не работает при использовании дисплея: таблица-ячейка; (который требуется, чтобы центрировать что-то вертикально))...
в любом случае это работает :)
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'});
}
вы можете в основном обернуть его в другой 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>
чтобы исправить положение, используйте это : -
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
один из возможных ответ:
<!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% -ширина все остальное не центрирует его)
например, если ваша боковая панель навигации 200px:
width: calc(100% - 200px);
единственное надежное решение-использовать table align=center как в:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
Я потратил слишком много времени, чтобы избежать использования таблицы, но опыт говорит мне прекратить борьбу он. Используйте таблицу для центрировать div. Работает во всех браузерах! Никогда больше не волнуйся.