Выравнивание блока по центру по вертикали и горизонтали
Известно, что выровнить блок заданной ширины по центру по горизонтали можно с помощью свойства margin:0 auto. Но как поступить, если его еще надо выровнить по центру по вертикали.
На самом деле всё просто. Чтобы разместить по центру блок с заданной шириной и высотой, надо его абсолютно спозиционировать с left:50% и top:50% относительно экрана и отрицательным маргином сместить его назад на половину размера ширины и высоты дива.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Выравнивание блока по центру по вертикали и горизонтали</title> <style type="text/css"> html, body{ margin:0; padding:0; width:100%; height:100%; } #CenterBlock{ background:#F00; width:400px; height:400px; position:absolute; top:50%; left:50%; margin:-200px 0 0 -200px; } </style> </head> <body> <div id="CenterBlock"> Я отцентрированный блок </div> </body> </html> |
Как видите, сначала мы задали html и body 100% высоту, чтобы они растянулись на весь экран, потом спозиционировали слой с left и top по 50% и отрицательным маргином сместили его назад на половинчатые размеры.
Комментарии (26) на “Выравнивание блока по центру по вертикали и горизонтали”
Оставить комментарий
Для вставки кода используйте <code> ... </code>.
Loading ...
Если не секрет, где вы живете? Уж очень вы на украинца похожи
Антон, я русский, не беспокойтесь =)
Подписался на РСС, буду читать почаще!
Здравствуйте,
Если начать сужать страницу по высоте, надпись и весь красный блок уезжает вверх под навигацию браузера, причем вертикального скрола не появляется.
Можно как-то это обойти?
Ilya, попробуйте задать минимальную высоту для сайта, равную окошку, может прокатит)
Добавил
min-height:700px;
не помогает, может быть еще способ?
А что делать, если блок не фиксированный (по высоте)?
Менее элегантный, но рабочи вариант ( #006699 цвет подобран под картинку )
Image without IMG
body {
background-color: #006699;
}
#CenterBlock{
background-color: #006699;
background-image: url(‘pict.jpg’);
height:644px;
width:897px;
}
text
Text in Centraled Block
эээ не вышло поста.
суть:
table w=100% h=100%; tr align = center; td valing = center;
в таблице div id = «CenterBlock», align = left;
Ясно. Спасибо за информацию. Попробую сделать))))
А если неизвестна ширина и высота родительского блока, тогда как делать?
[code]1[/code]
«Если не секрет, где вы живете? Уж очень вы на украинца похожи»
И чем же он похож?
ёптыть, научись всё таки писать грамотно. Запятые в заголовке поставь, мудила
хуйня какая-то
Гавно, при изменении разрешения все поплывет…и впрямь — хуйня!!!
НУ точно же! а я уже час мучилси! Спасибо!
Не помогло. Пытался выровнять блок по серединке, всё равно влево съезжает. Будем искать.
Действительно говно полное. При изменении размеров окна браузера вся эта шляпа попадает в просак. Вообще жалею о том что потратил минуту, прочитав эту хуйню!
Что я только не делал с дивом: никак не хотел на место вставать. Спасибо за статью.
Скажите а как его выровнять только по вертикали..
тоесть хочу поставить небольшой блок, чтобы он напр. придерживался левого края, но по вертикали был по центру ???
в
Ребята , float: left; пропишите в стилях левого блока!!!!!!!!!!правый обтекать не будет!
я решил полегче http://divhack.com/node/26
пашет под ие7,8 и всеми нормальными браузерами
Здрассте!
Не подскажете, как сделать, чтобы таблица, которая нах в основной таблице, смещалась вниз (по содержимому соседней ячейки). Могу показать:) если непонятно выразилась.
Если можно, в ай-си-ку 338702854
Спасибо
Применил у себя. Всё прекрасно сработало! Очень корректно и легко. По-моему, у кого не получается, пусть проверит коды и всё станет на место.