Я хочу 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>Еще один, который я не вижу в списке:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
height должна быть объявлена (см. Переменная высота)overflow: auto настроек overflow: auto предотвращение overflow: auto содержимого (см. Переполнение)Источник: абсолютное горизонтальное и вертикальное центрирование в CSS
Простейшим способом были бы следующие 3 строки CSS:
1) положение: относительное;
2) верх: 50%;
3) преобразование: translateY (-50%);
Ниже приведен пример:
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}<div class='outer-div'>
<div class='middle-div'>
Test text
</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>Теперь решение flexbox - очень простой способ для современных браузеров, поэтому я рекомендую это для вас:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}<div class="container">
<div>Div to be aligned vertically</div>
</div>Это самый простой метод, который я нашел, и я использую его все время (демонстрация jsFiddle здесь)
Спасибо Крису Койеру из CSS Tricks за эту статью.
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>После многих исследований я наконец нашел окончательное решение. Он работает даже для плавающих элементов. Просмотр источника
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
Чтобы расположить центр на странице, проверьте ссылку на скрипку.
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}<div id="vh" class="box">Div to be aligned vertically</div> Примечания
1. Родительскому элементу присваивается имя класса.
2. Добавьте префиксы flex vendor, если это требуется вашим поддерживаемыми браузерами.
.verticallyCenter {
display: flex;
align-items: center;
}<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>К сожалению - но не удивительно - решение сложнее, чем хотелось бы. К сожалению, вам нужно будет использовать дополнительные div вокруг div, который вы хотите вертикально центрировать.
Для браузеров, совместимых со стандартами, таких как Mozilla, Opera, Safari и т.д., Вам нужно установить внешний div для отображения в виде таблицы, а внутренний div будет отображаться как таблица-ячейка, который затем может быть центрирован по вертикали. Для Internet Explorer вам нужно поместить внутренний div абсолютно внутри внешнего div, а затем указать верхнюю часть как 50%. Следующие страницы хорошо объясняют эту технику и предоставляют некоторые примеры кода:
Существует также метод вертикального центрирования с использованием JavaScript. Вертикальное выравнивание содержимого с помощью JavaScript и CSS демонстрирует его.
Если кто-то заботится только об Internet Explorer 10 (и позже), используйте flexbox:
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}<div class="parent">
<div class="centered"></div>
</div>Самое простое решение ниже:
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align:center;
border:1px solid red;
}<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div> Современный способ flexbox элемент по вертикали - использовать flexbox.
Вам нужен родитель, чтобы определить высоту и ребенка в центре.
В приведенном ниже примере центр div будет находиться в центре вашего браузера. Что важно (в моем примере) - установить height: 100% на body и html а затем min-height: 100% на ваш контейнер.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}<div id='center_container'>
<div id='center'>I am center.</div>
</div>Если вы не заботитесь об Internet Explorer 6 и 7, вы можете использовать технику, которая включает два контейнера.
display: table;display: table-cell;vertical-align: middle;display: inline-block;Вы можете добавить любой контент, который вы хотите в поле содержимого, не заботясь о его ширине и высоте!
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
} <body>
<div class="vertical">Vertically left</div>
<div class="horizontal">Horizontal top</div>
<div class="center">Vertically Horizontal</div>
</body>Это всегда, куда я иду, когда я должен вернуться к этой проблеме.
Для тех, кто не хочет совершать прыжок:
position:relative или position:absolute.position:absolute и top:50% на дочернем контейнере для перемещения сверху вниз до середины родителя.Пример этого в коде:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Я просто написал этот CSS и узнал больше, пожалуйста, пройдите: эта статья с вертикальным выравниванием всего лишь с тремя строками CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Использование свойства flex в CSS.
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}<div class="parent">
<div class="child"></div>
</div> Ответ от Billbad работает только с фиксированной шириной .inner div. Это решение работает для динамической ширины, добавляя атрибут text-align: center в .outer div.
.outer {
position: absolute;
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
display: inline-block;
width: auto;
}<div class="outer">
<div class="middle">
<div class="inner">
Content
</div>
</div>
</div>Я знаю, что ответы уже даны, но я думаю, что ссылка может быть полезна для центрального выравнивания во всех случаях: howtocenterincss.com
Три строки кода с использованием transform работают практически в современных браузерах и Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Я добавляю этот ответ, так как обнаружил некоторую неполноту в предыдущей версии этого ответа (и Qaru не позволит мне просто комментировать).
'position' relative испортил стиль, если текущий div находится в теле и не имеет контейнера div. Однако "фиксированный", похоже, работает, но он, очевидно, исправляет содержимое в центре окна просмотра 
Также я использовал этот стиль для центрирования некоторых оверлейных div и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно, проблема рендеринга. Но добавление только минимального дополнения, чтобы некоторые из них отображали его правильно. Chrome и Internet Explorer (неожиданно) предоставили ящики без необходимости заполнения 
Следующая ссылка представляет простой способ сделать это всего за 3 строки в вашем CSS:
Вертикальное выравнивание всего лишь с тремя строками CSS.
Кредиты: Себастьян Экстрём.
Я знаю, что у вопроса уже есть ответ, однако я видел полезность в ссылке для его простоты.
Не отвечает на совместимость браузера, но также упоминает новую Grid и не очень новую функцию Flexbox.
Сетка
От: Документация по Mozilla - Grid - выравнивание по вертикали
Поддержка браузера: Поддержка браузера Grid
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Поддержка браузера: Flexbox Поддержка браузера
CSS
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
Я думаю, что надежное решение для всех браузеров без использования flexbox - "align-items: center;" представляет собой комбинацию отображения: table и vertical-align: middle ;.
.vertically-center
{
display: table;
width: 100%; /* optional */
height: 100%; /* optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
body, html { margin: 0; }
body {
display: grid;
min-height: 100vh;
align-items: center;
}<div>Div to be aligned vertically</div>Я сделал это с этим (измените ширину, высоту, верхний край и margin-left соответственно):
.wrapper {
width:960px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin-top:-295px;
margin-left:-480px;
}
<div class="wrapper"> -- Content -- </div>
Специально для родительских div с относительной (неизвестной) высотой центрирование в неизвестном решении отлично работает для меня. В этой статье есть несколько действительно хороших примеров кода.
Он был протестирован в Chrome, Firefox, Opera и Internet Explorer.
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}<div style="width: 400px; height: 200px;">
<div class="block" style="height: 90%; width: 100%">
<div class="centered">
<h1>Some text</h1>
<p>Any other text..."</p>
</div>
</div>
</div> Просто сделайте это: добавьте класс в свой div:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
И прочитайте эту статью для объяснения. Примечание. Height необходима.
Я написал статью о различных методах вертикального центрирования в CSS. Я уверен, что было бы полезно всем, кто хочет вертикально сосредоточиться в CSS, Если вы хотите прочитать его - Нажмите здесь
Недавно я обнаружил одну хитрость: вам нужно использовать top 50% а затем сделать translateY(-50%)
.outer-div {
position: relative;
height: 150px;
width: 150px;
background-color: red;
}
.centered-div {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: white;
}<div class='outer-div'>
<div class='centered-div'>
Test text
</div>
</div>