Я хочу відцентрувати div
по вертикалі за допомогою CSS. Мені не потрібні таблиці або JavaScript, а тільки чистий CSS. Я знайшов кілька рішень, але всі вони не мають підтримки Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Як відцентрувати div
по вертикалі у всіх основних браузерах, включаючи Internet Explorer 6?
Нижче наведено найкраще універсальне рішення, яке я зміг створити для вертикального та горизонтального центрування блоку вмісту фіксованої ширини та гнучкої висоти. Воно було протестоване і працює в останніх версіях Firefox, Opera, Chrome і Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Переглянути робочий приклад з динамічним вмістом.
Я вбудував деякий динамічний вміст, щоб перевірити гнучкість, і хотів би знати, якщо хтось побачить якісь проблеми з ним. Він також повинен добре працювати для центрованих накладок - лайтбоксів, спливаючих вікон тощо.
Насправді для вертикального центрування потрібно два div'а. Div, що містить вміст, повинен мати ширину і висоту.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Ось [результат][1]
На жаль - але не дивно - рішення є більш складним, ніж хотілося б. Також, на жаль, вам потрібно буде використовувати додаткові div навколо div, який ви хочете вертикально відцентрувати.
Для браузерів, сумісних зі стандартами, таких як Mozilla, Opera, Safari тощо, вам потрібно встановити зовнішній div для відображення як таблиця, а внутрішній div для відображення як таблиця-комірка - які потім можуть бути вирівняні по вертикалі. Для Internet Explorer вам потрібно позиціонувати внутрішній div абсолютно в межах зовнішнього div, а потім вказати top як 50%. Наступні сторінки добре пояснюють цю техніку, а також надають деякі приклади коду:
Існує також техніка виконання вертикального вирівнювання за допомогою JavaScript. Її демонструє Вирівнювання контенту по вертикалі за допомогою JavaScript і CSS.