./comments
./contacts telegram: @stikname
email: ;

Как разместить div блок по центру страницы? Просто!

Верстка


Способов размещения блока в центре страницы не считанное количество, но большинство из них редкостное дерьмо, которое не отличается высокой кроссбраузерностью. Понадобилось сегодня написать один интересный скрипт, что привело к сборке следующего варианта размещения div блока в центре страницы. Пользуйтесь.

CSS:
<style type="text/css">
#centerDiv {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
</style>


HTML:
<div id="centerDiv">content</div>
08.04.2013 01:43:27
admin
2507
10
Комментарии

Семён
11.04.2013 23:58:32
блин, это все наверное все должны знать, с заданной высотой и позиционированием - это как раз не совсем кроссбраузерность, да и вообще позиционирование необходимо применять только когда другими способами уже никак...


P.S. Очень часто бывает проблема с размещение блока по центру без заданных размеров
. вот тогда приходится подумать)
admin
12.04.2013 02:43:00
Семён, как бы то ни было. Проверено у себя в ff/opera/chrome/ie. + через browsershots прогонял. Работает за малым исключением почти в 100% случаев... так чем тогда не кроссбраузерность? )
Во всяком случае, для меня на данный момент то что работает у ~99% пользователей интернета - отлично.

Ясно дело что блок с жёстко указанными параметрами проще всего разместить в центре страницы. :)
lerr
16.04.2013 20:19:39
Можно обойтись одной строчкой margin: 0 auto;
admin
17.04.2013 02:02:53
lerr, это для размещения блока по центру(горизонтально), но вертикально он будет прижат к верхней границе.
В статье же речь о центре странице... как по вертикали так и по горизонтали.
Семён
10.05.2013 19:28:43
Можно обойтись одной строчкой margin: auto auto;
admin
11.05.2013 04:11:29
Семён, ты перед тем как написать это не пробовал проверить работоспособность ? :)
lerr
18.05.2013 20:31:56
Стик, помоги с одним вопросом. Всегда использовал DLE и там очень удобно выводить содержимое shortstory и fullstory. А как это реализовать в вордпресс? Например в категории нужно чтоб отображался тайтл и тумба, а в полной новости чтоб тумба не отображалась а только ролик
admin
19.05.2013 11:35:47
lerr, я бы с радостью тебе помог, но увы..

С dle я немного работал, потому знаю там про shortstory и fullstory, а вот с wp я вообще сталкивался только у себя на локале, исключительно чтобы посмотреть функционал. Не люблю сторонние cms.
Molodya
22.05.2013 21:36:18
stk, не планируешь создать аналог fsl.cs, только по ксгоу
admin
23.05.2013 11:28:32
Molodya, не уверен, но всё может быть. Для этого нужно огромное количество свободного времени, а у меня его на данный момент совсем нет.