1368

Я хочу центрировать по divвертикали с помощью CSS. Я не хочу таблиц или JavaScript, а только чистый CSS. Я нашел несколько решений, но во всех них отсутствует поддержка Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Как я могу центрировать по divвертикали во всех основных браузерах, включая Internet Explorer 6?

css cross-browser alignment vertical-alignment centering Бурак Эрдем
источник

25

@MarcoDemaio Разве люди постоянно не одобряют tablesздесь макеты?

Chud37

14

@ Chud37: это зависит от того, что вы должны сделать, таблицы для разметки, как правило, не универсальны и длинны для ввода кода, с помощью CSS вы можете легко изменить разметку в 2 столбца в разметку 3/4/5 sols и т. Д. Но в этом случае отличается тем, что использует десятки советов и хитростей CSS для такой простой задачи, которую можно решить с помощью идеального кросс-браузерного стола, это все равно что пытаться войти в свой дом через окно вместо использования двери.

Марко Демайо

В случае, если люди не заботятся о поддержке старых браузеров: davidwalsh.name/css-vertical-center

Karolis Šarapnickis

1

css-vertical-center.com есть некоторые решения с информацией о совместимости браузера

EscapeNetscape

2

Вот много способов сделать это css-tricks.com/centering-css-complete-guide

Майкл Юрин

1375

Ниже приведено лучшее универсальное решение, которое я мог бы построить для центрирования по вертикали и горизонтали в центре содержимого с фиксированной шириной и гибкой высотой . Он был протестирован и работает для последних версий 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>

Развернуть фрагмент

Просмотр рабочего примера с динамическим контентом

Я встроил некоторый динамический контент для проверки гибкости и хотел бы знать, если кто-нибудь видит какие-либо проблемы с ним. Он должен хорошо работать и для центрированных оверлеев - лайтбокс, всплывающее окно и т. Д.

Billbad
источник

Без «абсолютного» внешнего DIV любой контент на странице до того, как он сдвинет весь блок вниз. Это делает его более независимым от другого содержимого страницы.

Billbad

9

.outer {position:absolute;width:100%;height:100%}не нужно, они здесь просто для демонстрации. Все, что нам нужно display:table, если кто-то запутался, как я.

лица

Я заметил, что это требует 99%, чтобы избежать полос прокрутки. Что более важно, это работает только с первыми двумя дивами, скажем , держатся .outerи middleи явно игнорировать .innerи его стиль. Я не знаю, в чем смысл margin-left, margin-rightустановить на авто, так как это не центрирует элемент по горизонтали ?? !!!

user10089632

Удаление width: 100%;и добавление margin: 0 autoк .outerпозволяет переменную ширину , а также.

рококо,

@ user10089632 Нет, дело не в ширине или высоте, а в положении. top: 0; left 0;отсутствует, по крайней мере, в Chrome, который устанавливает значение по умолчанию 1.

Michał Woliński

280

Еще один, которого я не вижу в списке:

.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 без хаков!)
Отзывчив с процентами и мин / макс
По центру независимо от заполнения (без определения размера ящика!)
heightдолжен быть объявлен (см. Переменная высота )
Рекомендуемая настройка overflow: autoдля предотвращения распространения контента (см. Переполнение)

_{Источник: Абсолютное горизонтальное и вертикальное центрирование в CSS}

Yisela
источник

7

Это сработало для меня, но мне нужно было по какой-то причине иметь фиксированную ширину и высоту в хроме

Райан Кнелл

1

Спасибо. Мне нужно было исправить, где мне не нужно было вычислять высоту или ширину в пикселях, и это работало отлично.

GFoley83

8

Отличное решение, особенно потому, что вам не нужен родительский div

Лука Стиб

1

Это делает растяжку, если высота не фиксирована, кроме этого: хорошее решение

Барт Бург

Если у вас есть ширина и высота, которые не являются 100%, используйтеmargin: auto;

Чарльз Л.

253

Самым простым способом были бы следующие 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>

Развернуть фрагмент

DrupalFever
источник

4

примечание: не работает должным образом, если высота внешнего делителя установлена с "min-height: 170px"

Барт Бург

3

Мешает

4

не работает, когда heightвнешнее divесть 100%. Тогда работает только с position: absolute;.

Arch Linux Tux

1

Сначала я нашел это решение в другом месте, но дополнительные благодарности этому конкретному ответу за упоминание -webkit-transformконкретного варианта, который мне понадобился, чтобы заставить этот метод работать в фантомах ... закончились часы борьбы, так что спасибо!

drmrbrewer

2

Это лучший ответ. Это невероятно просто, портит наименьшее количество существующей работы и функционирует во всем, начиная с IE9, который никто даже больше не использует. Давайте возьмем этого парня еще больше голосов!

Ник Стил

136

На самом деле вам нужно два 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>

Развернуть фрагмент

Вот результат

Вадим Овчинников
источник

4

это старый трюк ... верхние 50% и верхнее поле отрицательны на половину высоты внутреннего div

Manatax

34

предполагается, что у вас есть фиксированная высота для div. не работает, когда div может изменить высоту.

Андре Фигейредо

116

Теперь решение 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>

Развернуть фрагмент

Сантош Халсе
источник

1

Если у вас есть navbar, вы можете изменить высоту, используя height: calc(100% - 55px)или любой другой рост navbar.

Адриан,

я также должен был удалить края / отступы от тела

Бен

Хорошо работает с float. Спасибо.

Амир А. Шабани

Обратите внимание, что это может вести себя странно в «новых, более старых» мобильных браузерах Safari. Рекомендуемое использование вместо высоты - flex-based для класса

Nine Magics

78

Редактировать 2020: используйте это, только если вам нужно поддерживать старые браузеры, такие как IE8 (что вы должны отказаться should). Если нет, используйте flexbox.

Это самый простой метод, который я нашел, и я использую его все время ( демонстрация 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>

Развернуть фрагмент

Поддержка начинается с IE8.

Армель Ларсье
источник

Отказавшись от поддержки старых браузеров, решением для меня стала не flexbox, а сеточная система. Мне было немного неприятно центрировать контент в контейнере, который, когда он становился слишком маленьким по высоте, должен был показывать полосу прокрутки, а центрированный контент терял область прокрутки всеми другими методами. В контейнере я просто использую: {display: grid; align-items: center; } Надеюсь, это кому-нибудь поможет.

Томасофен

63

После долгих исследований я наконец нашел окончательное решение. Это работает даже для плавающих элементов. Просмотреть исходный код

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

ymakux
источник

4

Это работает действительно хорошо, если вы помните, что элемент контейнера должен иметь неявную или явную высоту; jsfiddle.net/14kt53un Небольшая ошибка для тех, кто относительно новичок в CSS.

Мартын Шатт

6

Из всех ответов это самый простой! Я надеюсь, что другие тоже увидят ваш ответ! Спасибо! Кстати, 50%у меня сработало (не -50%)

The Codesee

Это было невероятно. После нескольких часов поисков этот сработал для меня. Я должен был использовать translateY (50%), я уверен, почему, но это сработало. В моем случае родитель был создан AEM Forms Engine, и я могу управлять только определенными дочерними элементами.

tarekahf

41

Решение Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Развернуть фрагмент

Реджи Пинкхем
источник

3

Примечание также justify-content: centerбудет

Питер Берг

36

Чтобы центрировать 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>

Развернуть фрагмент

Nerdroid
источник

3

@ArmelLarcier Это неправильно. Относительными единицами являются проценты %, emс и remс. Абсолютные или фиксированные значения - это пиксели или точки. То, что вы имеете в виду, это «это работает только с заявленной высотой». Однако, хотя этот метод, описанный Моесом, требует высоты, когда вы объявляете его в относительных единицах, процентное соотношение является лучшим, независимо от того, сколько контента находится внутри центрированного DIV, DIV будет расширяться по вертикали, чтобы соответствовать его контенту. В этом прелесть этого метода. Еще одна хорошая вещь - этот метод работает в IE8 / 9/10 на тот случай, если кому-то все еще нужно поддерживать эти браузеры.

Рикардо Зеа

@ricardozea Я не хочу играть упрямо, но говорить, что центрированный div будет расширяться по вертикали, а оставаться вертикально центрированным - неправильно. Попробуй это. Я знаю, когда говорю, что высота должна быть «фиксированной», это не то слово. Это действительно относительно его родителя. В любом случае, я думаю, что метод Криса Койера имеет больше смысла, см. Мой ответ stackoverflow.com/a/21919578/1491212 Он совместим с IE8 и работает с элементом без заданных размеров.

Армель Ларсье

1

@ArmelLarcier Все хорошо. Это не так, брат. Попробуйте это: codepen.io/shshaw/pen/gEiDt - Добавить абзацы в зеленое поле;]. Конечно, он использует Modernizr для достижения эффекта, но в целом это выполнимо. Я видел ваш ответ и пост CSS-Tricks.com, но этот метод меня не радует, он использует дополнительную разметку, а CSS слишком многословен. Я думаю, что лучшее решение - использовать flexbox или transform: translate(-50%, -50%);технику. Для IE8 я бы просто оставил его сверху / по центру и двигался дальше.

Рикардо Зеа

1

@ricardozea Ну, кодовая ручка, на которую вы ссылались, использует метод display: table и дополнительную разметку, поэтому я не удивлен. В любом случае +1 к последнему предложению.

Армель Ларсье

23

Самое простое решение ниже:

.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>

Развернуть фрагмент

Варша Дхадж
источник

2

Действительно, самый простой из всех :) Хотя я должен был установить стили для внешнего div, вместо body.

Baburao

21

К сожалению - но неудивительно - решение более сложное, чем хотелось бы. Также, к сожалению, вам нужно будет использовать дополнительные элементы div вокруг элемента, который вы хотите расположить по центру.

Для совместимых со стандартами браузеров, таких как Mozilla, Opera, Safari и т. Д., Вам нужно установить внешний div, который будет отображаться в виде таблицы, и внутренний div, который будет отображаться в виде ячейки таблицы, - который затем можно центрировать по вертикали. Для Internet Explorer вам нужно расположить внутренний div абсолютно внутри внешнего div, а затем указать верх как 50% . Следующие страницы хорошо объясняют эту технику и предоставляют несколько примеров кода:

Вертикальное центрирование в CSS
~~Вертикальное центрирование в CSS с неизвестной высотой (совместимо с Internet Explorer 7)~~ (больше не работает)
Вертикальное центрирование в CSS с неизвестной высотой (совместим с Internet Explorer 7) (Архивная статья любезно предоставлена Wayback Machine)

Существует также методика вертикального центрирования с использованием JavaScript. Вертикальное выравнивание контента с помощью JavaScript и CSS демонстрирует это.

sids
источник

20

Если кому-то нужна только 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

bravedick
источник

Android <4.4 не поддерживает align-items: center;!

Андре Фидлер

На самом деле, он поддерживает align-items: center; caniuse.com/#search=align-items

t.mikael.d

@ t.mikael.d Вы можете поближе взглянуть на этот стол. Для Android <4.4 говорится: «Поддерживает только старую спецификацию flexbox и не поддерживает перенос».

Натан Осман

15

Современный способ центрировать элемент по вертикали - использовать flexbox.

Вам нужен родитель, чтобы решить рост и ребенка по центру.

В приведенном ниже примере центр в центре вашего браузера. Что важно (в моем примере), чтобы установить , 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>

Развернуть фрагмент

Marwelln
источник

14

Центрирование только по вертикали

Если вас не интересуют 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>

Развернуть фрагмент

Смотрите также эту скрипку !

Джон Слегерс
источник

13

.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>

Развернуть фрагмент

Связанный: Center a Image

antelove
источник

10

Это всегда, куда я иду, когда я должен вернуться к этому вопросу .

Для тех, кто не хочет совершать прыжок:

Укажите родительский контейнер как position:relativeили position:absolute.
Укажите фиксированную высоту для дочернего контейнера.
Установите position:absoluteи top:50%на дочернем контейнере, чтобы переместить верхнюю часть к середине родительского контейнера.
Установите 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>

Ninx
источник

9

Использование свойства 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>

Развернуть фрагмент

или с помощью display: flex;иmargin: auto;

Показать фрагмент кода

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Развернуть фрагмент

показать текстовый центр

Показать фрагмент кода

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Развернуть фрагмент

Используя процент (%) высоты и ширины.

Показать фрагмент кода

.parent {
    position: absolute;
    height:100%;
    width:100%;
    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>

Развернуть фрагмент

Дипу Регунат
источник

8

Я только что написал этот CSS и, чтобы узнать больше, пожалуйста, пройдите: Эта статья с вертикальным выравниванием всего с 3-мя строками CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Санджиб Дебнатх
источник

1

CSS-преобразования могут вызывать искажения в тексте и границах (когда математика приводит к дробным пикселям).

Натан К

5

CSS Grid

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

Развернуть фрагмент

Энди Хоффман
источник

5

Для новичков, пожалуйста, попробуйте

display: flex;
align-items: center;
justify-content: center;

Усман I
источник

1

Добавьте фрагмент стека, показывающий, как этот код CSS выравнивает по вертикали a div.

Еретик Обезьяна

это тоже работает <div style="display:flex"><div style="margin:auto">Inner</div></div>

idrisadetunmbi

Мне попалось это замечательное объяснение выравнивания предметов и обоснования содержания. Необходимо прочитать: stackoverflow.com/questions/42613359/…

Усман, 1

4

Ответ от Billbad работает только с фиксированной шириной .innerdiv. Это решение работает для динамической ширины, добавляя атрибут text-align: centerв .outerdiv.

.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>

Развернуть фрагмент

Рувен
источник

Интересно! Я использую практически идентичную технику! -> stackoverflow.com/questions/396145/…

Джон Слегерс

4

Использование трех строк кода transformработает практически в современных браузерах и Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Я добавляю этот ответ, так как я обнаружил некоторую неполноту в предыдущей версии этого ответа (а переполнение стека не позволяет мне просто комментировать).

Относительный 'position' портит стиль, если текущий div находится в теле и не имеет контейнерного div. Хотя «исправлено», кажется, работает, но оно, очевидно, фиксирует содержимое в центре области просмотра
Также я использовал этот стиль для центрирования некоторых оверлеев div и обнаружил, что в Mozilla все элементы внутри этого трансформированного div потеряли свои нижние границы. Возможно проблема рендеринга. Но добавление только минимального отступа к некоторым из них сделало это правильно. Chrome и Internet Explorer (на удивление) рендерили поля без необходимости заполнения.

MandarK
источник

3

Следующая ссылка представляет простой способ сделать это всего за 3 строки в вашем CSS:

Выровняйте все по вертикали всего с 3 строками CSS .

Кредиты для : Себастьян Экстрём .

Я знаю, что на этот вопрос уже есть ответ, однако я увидел полезность в ссылке для его простоты.

Hicaro
источник

3

Не отвечая за совместимость браузера, но также упомянув новую сетку и не очень новую функцию Flexbox.

сетка

От: Mozilla - Сетка Документация - Выровнять Div по вертикали

Поддержка браузеров: поддержка Grid Browser

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;

ctekk
источник

3

Я думаю, что солидное решение для всех браузеров без использования flexbox - "align-items: center;" является комбинацией отображения: таблица и вертикальное выравнивание: среднее ;.

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>

Moдемо: https://jsfiddle.net/6m640rpp/

Мартин Уитке
источник

2

Я сделал это с этим (изменить ширину, высоту, margin-top и margin-left соответственно):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Netuddki
источник

Это хорошо, только если вы знаете ширину / высоту DIV, которую вы пытаетесь отцентрировать. Это не то, что задает вопрос

egr103

2

Содержимое может быть легко отцентрировано с помощью 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;
}

Махендра Лия
источник

2

Особенно для родительских элементов 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>

Развернуть фрагмент

Рувен
источник

2

Просто сделайте это: добавьте класс по вашему div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

И прочитайте эту статью для объяснения. Примечание: Heightнеобходимо.

Anshul
источник

2

Недавно я обнаружил одну хитрость: вам нужно использовать, 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>

Развернуть фрагмент

Melchia
источник

Как вертикально центрировать div для всех браузеров?

Ответы:

Решение Flexbox

Центрирование только по вертикали

Внешний контейнер:

Внутренний контейнер:

Контент окно:

Демо-версия:

Центрирование по горизонтали и вертикали

Внутренний контейнер:

Контент окно:

Демо-версия:

CSS Grid

CSS

HTML