Учитывая div с известными размерами, скажем width: 300px; height: 200px, какой самый простой способ разместить его в середине экрана как по вертикали, так и по горизонтали? Example hereЧто является самым простым методом для вертикального + горизонтального центрирования div в окне?
Мне интересен последний Firefox (нет необходимости в IE-хаках).
CSS только пожалуйста, без Javascript.
Положение это 50% из окна/родительского контейнера и использовать отрицательный размер маржи, что половина из элементов ширина/высота :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
Вам может понадобиться установить height: 100%, на как body и html
html, body {
height: 100%;
}
Edit: Вот работа example.
Какие методы вы используете для использования? Например, CSS до какого уровня - 2 или 3? Javascript? JQuery? Моя первая мысль состоит в том, что, поскольку divs можно центрировать по горизонтали через margin-left: auto; и margin-right: auto;, возможно, попробуйте margin: auto; для всех 4 сторон. Дайте мне знать, если это сработает.
CSS -2 или 3? Что вы имеете в виду @ClarkeyBoy? – Marko
Ну, я не знаю, есть ли что-нибудь из CSS3, которое поможет, но если ему нужно работать в CSS2. Я не собирался прикладывать все усилия, чтобы выяснить, так ли это, не зная, может ли это быть CSS3 в первую очередь. – ClarkeyBoy
Не работает для вертикальной. http://jsfiddle.net/Wv2jZ/15/ – Marko
Без поддержки IE этого на самом деле довольно легко достичь, используя display: table и display: table-cell.
Вот обновить ваш HTML:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
CSS:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
И предпросмотре: http://jsfiddle.net/we8BE/
Просто из любопытства, почему у вас есть 2 объявления высот для '# my_div'? – Marko
А, хорошо поймать. Я не видел, что у вас уже была высота, определенная в ваших стилях. Это может быть не совсем то, что вы ищете, а демонстрация того, как это можно сделать в настройке, отличной от IE. – wsanville
Центрированный div - высота 100% - оригинальный вопрос, заявленный 200px. Он не работает, если вы удаляете высоту 100% (по крайней мере, не в Chrome). Firefox не работает хорошо на моей машине, поэтому не могу проверить его - я надеюсь, что Chrome ведет себя одинаково. – ClarkeyBoy
Самый простой? Один из многочисленных jQuery center plugins ...
Прочтите комментарии к моему сообщению - «Я имею в виду, безусловно, без Javascript». – ClarkeyBoy
@ClarkeyBoy: Хорошо ... этого комментария не было, когда я начал писать ... Нет проблем! – Lorenzo
Это не заслуживает голосования, поскольку исходный пост явно не сказал без JS. Я собираюсь продвигаться именно по этой причине :) – Marko
Я не знаю, является ли это самым простым способом, но, похоже, он работает.
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Это то же решение, что и я :) – Marko
не 'позиция будет: fixed' быть более подходящим? – sje397
@ sje397, это будет зависеть от того, хотите ли они, чтобы div прокручивал страницу или нет. – Marko
@Marco, кажется, работает без установки 'height: 100%' on 'html, body'. Почему это необходимо? –