Как вертикально центрировать div для всех браузеров?
Я хочу, чтобы центрировать div
вертикально с CSS. Мне не нужны таблицы или JavaScript, а только чистый CSS. Я нашел некоторые решения, но всем им не хватает поддержки Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
как я могу центр div
вертикально во всех основных браузерах, включая Internet Explorer 6?
30 ответов
ниже-лучшее всестороннее решение, которое я мог бы построить по вертикали и горизонтали в центре фиксированной ширины, гибкий высота окне содержимого. Он был протестирован и работает для последних версий Firefox, Opera, Chrome и Safari.
.outer {
display: table;
position: absolute;
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>
Просмотр Рабочего Примера С Динамическим Контентом
Я построил в некотором динамическом содержании для того чтобы испытать гибкость и хотел был бы знать если кто-нибудь видит любые проблемы с он. Он также должен хорошо работать для центрированных накладок - lightbox, pop-up и т. д.
еще один я не вижу в списке:
.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;
}
- Кросс-браузер (включая Internet Explorer 8-Internet Explorer 10 без хаков!)
- отзывчивый с процентами и min - / max -
- Центризованный независимо от прокладки (без коробки-загрунтовкы!)
-
height
должно быть объявлено (см. Переменной Высоты) - рекомендуемое значение
overflow: auto
для предотвращения утечки содержимого (см. Переполнение)
источник: абсолютное горизонтальное и вертикальное центрирование в CSS
самым простым способом было бы следующее 3 строк CSS:
position: relative;
top: 50%;
transform: 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>
здесь результат
Это самый простой способ я нашел, и я использую его все время (jsFiddle демо здесь)
спасибо Крис Койер из CSS трюки для в этой статье.
.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>
поддержка начинается с IE8.
после многих исследований я, наконец, нашел окончательное решение. Он работает даже для плавающих элементов. Посмотреть Источник
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
теперь решение flexbox-очень простой способ для современных браузеров, поэтому я рекомендую вам:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
body, html{
height:100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
чтобы центрировать div на странице, проверьте ссылку скрипки.
#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>
другой вариант - использовать flex box, проверьте ссылку скрипки.
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
другой вариант - использовать преобразование CSS 3:
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.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>
решение Flexbox
Примечания
1. Родительскому элементу присваивается имя класса.
2. Добавьте префиксы поставщика flex, если это требуется вашим поддерживаемые браузеры.
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
к сожалению - но неудивительно-решение более сложное, чем хотелось бы. Также, к сожалению, вам нужно будет использовать дополнительные divs вокруг div, который вы хотите вертикально центрировать.
для браузеров, совместимых со стандартами, таких как Mozilla, Opera, Safari и т. д. вам нужно установить внешний div, который будет отображаться как таблица и внутренний div, который будет отображаться как таблицы-ячейки - который затем может быть вертикально центрирован. для Internet Explorer, вам нужно позиция внутренний div абсолютно внутри внешнего div, а затем укажите top as 50%. На следующих страницах хорошо объясняется этот метод и приводятся некоторые примеры кода:
- вертикальное центрирование в CSS
-
вертикальное центрирование в CSS с неизвестной высотой (совместимость с Internet Explorer 7)(больше нет live) - вертикальное центрирование в CSS с неизвестной высотой (совместимость с Internet Explorer 7) (архивная Статья любезно предоставлена Wayback Machine)
существует также техника для вертикального центрирования с помощью 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>
поддержка Flexbox:http://caniuse.com/flexbox
современный способ центрирования элемента по вертикали будет использовать flexbox
.
вам нужен родитель, чтобы решить, высоту и ребенка в центре.
пример ниже будет центрировать div к центру в вашем браузере. Важно (в моем примере) установить height: 100%
to 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>
.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>
по теме: центр изображения
центрирование только по вертикали
если вы не заботитесь о 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>
см. также эта скрипка!
центрирование по горизонтали и вертикали
если вы хотите центрировать как по горизонтали, так и по вертикали, вам также нужно следующее.
в внутренний контейнер:
- должно быть
text-align: center;
поле содержание:
- следует повторно настроить горизонтальное выравнивание текста, например
text-align: left;
илиtext-align: right;
, если вы не хотите, чтобы текст был центрирован
демо:
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;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
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>
см. также эта скрипка!
самое простое решение ниже:
.outer-div{
width: 100%;
height: 200px;
display: flex;
}
.inner-div{
margin: auto;
text-align:center;
}
<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>
это всегда, куда я иду, когда я должен вернуться в этот вопрос.
для тех, кто не хочет сделать прыжок:
- укажите родительский контейнер как
position:relative
илиposition:absolute
. - укажите фиксированную высоту на дочернем контейнере.
- Set
position:absolute
иtop:50%
на дочернем контейнере, чтобы переместить верхнюю часть вниз к середине родителя. - Set margin-top: - yy, где yy-половина высоты ребенка контейнер для смещения элемента вверх.
пример этого кода:
<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 и, чтобы узнать больше, пожалуйста, пройдите:эта статья с вертикальным выравниванием всего с 3 строками CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
следующая ссылка представляет простой способ сделать это с помощью всего 3 строк в вашем CSS:
вертикальное выравнивание всего с 3 линиями CSS.
кредиты: Себастьян Экстрем.
Я знаю, что вопрос уже имеет ответ, однако я видел полезность в ссылке для его простоты.
ответ от 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>
три строки кода с использованием transform
работает практически на современных браузерах и Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Я добавляю этот ответ, так как я нашел некоторую неполноту в предыдущей версии этого ответа (и переполнение стека не позволит мне просто комментировать).
'position' relative портит стиль, если текущий div находится в теле и не имеет контейнера div. Однако "исправлено", кажется, работает, но он, очевидно, фиксирует содержимое в центр окна просмотра
также я использовал этот стиль для центрирования некоторых наложений divs и обнаружил, что в Mozilla все элементы внутри этого преобразованного div потеряли свои нижние границы. Возможно, проблема рендеринга. Но добавление только минимального заполнения к некоторым из них сделало это правильно. Chrome и Internet Explorer (удивительно) визуализировали коробки без необходимости заполнения
Я сделал это с этим (измените ширину, высоту, маржу-верхнюю и маржу-левую соответственно):
.wrapper {
width:960px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin-top:-295px;
margin-left:-480px;
}
<div class="wrapper"> -- Content -- </div>
не отвечает за совместимость браузера, но также упомянуть новую сетку и не так новую функцию Flexbox.
решетки
From:Mozilla-Документация Сетки-Выровнять Div По Вертикали
Поддержка Браузера: Поддержка Браузера Сетки
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;
специально для родительских divs с относительной (неизвестной) высотой,центрирование в неизвестном решение работает для меня. В статье есть несколько действительно хороших примеров кода.
Он был протестирован в 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>
Я думаю, что твердое решение для всех браузеров без использования flexbox - " align-items: center;" представляет собой комбинацию display: table и vertical-align: middle;.
в CSS
.vertically-center
{
display: table;
width: 100%; /* optional */
height: 100%; /* optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML-код
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
demo демо:https://jsfiddle.net/6m640rpp/
Я нахожу это наиболее полезным.. он дает наиболее точный макет " H " и очень прост в понимании.
преимущество этой разметки заключается в том, что вы определяете размер своего контента в одном месте -> "PageContent".
Цвета фона страницы и ее горизонтальных полей определяются в соответствующих divs.
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
my content goes here...
</div>
</div>
</div>
</div>
и здесь с CSS разделены:
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table; width: 100%; height: 100%;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}
#PageBackground{
display: table-cell; vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
style="width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;
}
содержимое можно легко центрировать с помощью flexbox. Следующий код показывает CSS для контейнера, внутри которого содержимое должно быть центрировано:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
это решение сработало для меня, если у вас есть элемент блока (e. г. ). Я использовал цвета, чтобы сделать решение более ясным.
HTML-код:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
Я использую это. Он работает в Internet Explorer 8 и более поздние:
height:268px
- for display:table
действует как min-height.
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML-код:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
просто сделайте это: добавьте класс в свой div
:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
и читать в этой статье для объяснений. Примечание:Height
необходимо.
следующее работает в моем случае и было протестировано в Firefox.
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
высота div и высота родителя являются динамическими. Я использую его, когда есть другие элементы на том же родителе, который выше целевого элемента, где оба расположены горизонтально.