<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
Как я могу вертикально центрировать тег h1 внутри тега div, независимо от того, насколько высок элемент div? т.е. если пользователь изменяет высоту своего браузера, я хочу, чтобы h1 вертикально выровнялся по центру в соответствии с новой высотой.
Спасибо.
Лучшим решением, с которым я когда-либо сталкивался, является использование свойства display и установка элемента оболочки как table, чтобы разрешить использование vertical-align:middle для центрирования элемента:
См. этот рабочий пример скрипта!
HTML
<body>
<div>
<h1>Text</h1>
</div>
</body>
CSS
body {width: 100%; height: 100%;} /* this is just to "view" the div height...*/
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Windows XP Profissional versão 2002 Service Pack 3
Windows 7 Home Edition с пакетом обновления 1
Linux Ubuntu 12.04
Ответ, который я нахожу наименее навязчивым и наименее запутанным, требует вставки тега <span> перед элементом <h1>: http://jsfiddle.net/Wexcode/axRxE/
HTML:
<div>
<span></span><h1>Text</h1>
</div>
CSS
div { text-align: center; /* horizontally center */ }
div span {
height: 100%;
vertical-align: middle;
display: inline-block; }
div h1 {
vertical-align: middle;
display: inline-block; }
Развертывание этого метода для вертикального выравнивания по высоте браузера: http://jsfiddle.net/Wexcode/axRxE/1/
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #0c0c0c;
}
.object {
background-color: #666666;
height: 350px;
width: 600px;
}
.verticalCenter {
width:600px;
height:350px;
position:absolute;
left:50%;
top:50%;
margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
<div class="verticalCenter">
<div class="object">cetnered</div>
</div>
</body>
</html>
Вы должны установить высоту и ширину в классе .verticalCenter так же, как и для вашего объекта (div, flash, image, text), который должен быть центрирован. А поля должны быть половину этих высот и ширины.
Я не думаю, что есть решение, если вы динамически меняете этот объект. Если, может быть, с javascripts.
Здесь довольно простое решение. Это в основном основано на настройке display:table-cell и выборе вертикального выравнивания, как среднее.
HTML:
<div id="vertical">
<p>this text is vertically centered. It long enough to wrap, and should work for any size chunk of content.</p>
<p>Heck, it even works with multiple items in the middle.</p>
</div>
CSS
#vertical {
display:table-cell;
vertical-align:middle;
height: 500px;
width: 300px;
}
JSFiddle: http://jsfiddle.net/6Re3E/1/
В браузере крест (рабочий стол) можно сделать это с помощью CSS2 + CSS3 и без Javascript.
Работает в
Документация: вертикальное центрирование в CSS Окончательное решение с неизвестной высотой:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html < br/" >
Очистить пример jsFiddle: http://jsfiddle.net/WYgsP/
<div class="outerBox">
<div class="helper">
<div class="boxWithUnknownHeight">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
CSS
.outerBox {
display: table;
height: 400px;
#position: relative; /* ie hack */
overflow: hidden;
border: 1px solid red;
}
.helper {
#position: absolute; /* ie hack */
#top: 50%; /* ie hack */
display: table-cell;
vertical-align: middle;
}
.boxWithUnknownHeight {
#position: relative; /* ie hack */
#top: -50%;
border: 1px solid green
}
Он работает, даже если я добавляю текст и разрывы строк через Firebug и т.д.
Чтобы ваш CSS был очищен от недействительных CSS-хаков, я рекомендую вам использовать условные комментарии для него и создать отдельный CSS с браузером конкретный код.
Как вертикальное центрирование с неизвестной высотой точно работает и почему: Подробное описание
Другие решения display: table и display: table-cell и/абсолютное позиционирование здесь.
У меня есть самые простые 3 строки css, которые собираются взорвать ваш ум, и вы будете думать: "Почему я не подумал об этом изначально". Используйте это на элементе, который хотите разместить вертикально по центру, и родительский контейнер просто добавляет высоту 100%.
position: relative;
top: 50%;
transform: translateY(-50%);
Позиция может быть как относительной, абсолютной, так и фиксированной.
Я использую таблицы для всего. Мне лично не нравится использовать display: table или что-то в этом роде, когда есть что-то, что уже существует.
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
Используя этот же метод, вы можете сделать что-то вроде этого для вашего случая:
<div id="container-div" style="position: relative">
<div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
<div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
</div>
</div>
С моей точки зрения, div не является подходящим выбором в этом случае. Мое предложение - пойти на table и vertical-align стиль на нем td s.