Центрируйте position:fixed элемент
Я хотел бы сделать a 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?
2 ответа
В основном необходимо установить сверху и слева на 50% , чтобы отцентровать левый верхний угол ныряльщика. Также необходимо установить крайний верх и крайний левый на отрицательную половину высоты и ширины ныряния, чтобы сместить центр к середине ныряния.
Таким образом, при условии (стандартный режим), это должно сделать:
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, то Вы можете вместо этого добавить влево: 0 и вправо: 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, и этот элемент центрируется только по горизонтали, а не по вертикали.
. Или просто добавьте 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 (который, конечно, вам все равно должен быть ..!)