CSS: Вертикальное выравнивание div, когда фиксированный размер div неизвестен
Как с помощью CSS выровнять
4 ответа
Это чистое решение CSS2 для горизонтального и вертикального центрирования без известных размеров ни контейнера, ни потомка. Хаки не участвуют. Я обнаружил это для этого ответа , и я также продемонстрировал это в этом ответе .
Решение основано на vertical-align: middle в сочетании с line-height: 0, родитель которого имеет фиксированную высоту строки.
HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
И CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Протестировано на Win7 в IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
Единственным предупреждением является IE7, для которого два самых внутренних элемента должны быть объявлены в одной строке, как показано в этой скрипке :
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Обратите внимание, что диапазоны также требуются для IE7. В любом другом браузере span может быть div'ом.
Душан Яновский, чешский веб-разработчик, опубликовал кросс-браузерное решение для этого некоторое время назад. Прочитайте http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Установите изображение в качестве фона для div и выровняйте его по центру
В дополнение к другим ответам здесь, модель гибкого бокса CSS3 , помимо прочего, позволит вам достичь этого.
Вам нужен только один элемент контейнера. Все внутри будет выложено в соответствии с правилами гибкой блочной модели.
<div class="container">
<img src="/logo.png"/>
</div>
CSS довольно прост, на самом деле:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Я для краткости пропустил правила с префиксом вендора.
Вот демонстрационная версия, в которой img всегда находится в центре страницы: http://jsfiddle.net/zn8bm/
Обратите внимание, что Flexbox является новой спецификацией, и в настоящее время реализовано только в Safari, Chrome и Firefox 4+.