Я хочу центрировать по 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;
}

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

Редактировать 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.

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

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

Решение Flexbox

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

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

<div>This is centered vertically</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>

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

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

К сожалению - но неудивительно - решение более сложное, чем хотелось бы. Также, к сожалению, вам нужно будет использовать дополнительные элементы 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 демонстрирует это.

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

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

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

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

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

Если вы хотите центрировать как горизонтально, так и вертикально, вам также необходимо следующее.

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

• должен иметь 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>

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

.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

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

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

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

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

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

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

CSS Grid

body, html { margin: 0; }

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

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

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

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

Ответ от 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>

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

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

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

1. Относительный 'position' портит стиль, если текущий div находится в теле и не имеет контейнерного div. Хотя «исправлено», кажется, работает, но оно, очевидно, фиксирует содержимое в центре области просмотра

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

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

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

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

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

Не отвечая за совместимость браузера, но также упомянув новую сетку и не очень новую функцию 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;

Я думаю, что солидное решение для всех браузеров без использования 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/

Я сделал это с этим (изменить ширину, высоту, 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>

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

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

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