Использование margin: auto для вертикального выравнивания div

Итак, я знаю, что мы можем центрировать div по горизонтали, если будем использовать margin:0 auto;. Должно margin:auto auto;работать так, как я думаю? И по вертикали?

Почему тоже не vertical-align:middle;работает?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

Обновить август 2020

Хотя ниже все еще стоит прочитать полезную информацию, у нас уже некоторое время есть Flexbox, поэтому просто используйте его в соответствии с этим ответом .

Вы не можете использовать:

vertical-align:middleпотому что это не применимо к элементам уровня блока

margin-top:autoи margin-bottom:autoпоскольку их используемые значения будут вычисляться как ноль

margin-top:-50%поскольку процентные значения маржи рассчитываются относительно ширины содержащего блока

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

Ты можешь использовать:

Несколько подобных обходных путей, которые работают для вашего сценария; три элемента должны быть вложены следующим образом:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

JSFiddle отлично работает согласно Browsershot .

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

Если отображается ваш родительский контейнер flex, то да , margin: auto auto(также известный как margin: auto) будет работать, чтобы центрировать его как по горизонтали, так и по вертикали, независимо от того, является ли он элементом inlineили block.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

<div id="parent">
    <div id="child">hello world</div>
</div>

Обратите внимание, что ширину / высоту необязательно указывать абсолютно, как в этом примере jfiddle, который использует размер относительно области просмотра.

Хотя браузерная поддержка флексбоксов находится на рекордно высоком уровне на момент публикации, многие браузеры по-прежнему не поддерживают ее или требуют префиксов поставщика. Посетите http://caniuse.com/flexbox для получения обновленной информации о поддержке браузера.

Обновить

Поскольку этому ответу было уделено немного внимания, я также хотел бы указать, что вам вообще не нужно указывать, используете marginли вы и хотите ли вы центрировать display: flexвсе элементы в контейнере:

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}

<div id="parent">
    <div>hello world</div>
</div>

Вот лучшее решение, которое я нашел: http://jsfiddle.net/yWnZ2/446/ Работает в Chrome, Firefox, Safari, IE8-11 и Edge.

Если объявленная height( height: 1em, height: 50%и т.д.) , или это элемент , где браузер знает высоту ( img, svgили canvas, например), то все , что вам нужно для вертикального центрирования заключается в следующем:

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

Вы обычно хотите , чтобы указать widthили max-widthтак что содержание не растягивается на всю длину экрана / контейнера.

Если вы используете это для модального окна, которое вы хотите всегда центрировать в области просмотра, перекрывая другой контент, используйте position: fixed;для обоих элементов вместо position: absolute. http://jsfiddle.net/yWnZ2/445/

Вот более полная запись: http://codepen.io/shshaw/pen/gEiDt

Изменить: это 2020 год, вместо этого я бы использовал гибкую коробку.

Оригинальный ответ:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Я знаю, что это вопрос 2012 года, но я нашел самый простой способ и хотел поделиться.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

и CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Если вам известна высота блока div, который вы хотите центрировать , вы можете разместить его абсолютно внутри его родительского элемента, а затем установить topзначение 50%. Это поместит верхнюю часть дочернего div на 50% вниз от его родительского элемента, то есть слишком низко. Поднимите его, установив margin-topна половину высоты. Итак, теперь у вас есть вертикальная средняя точка дочернего div, сидящая в вертикальной средней точке родительского элемента - вертикально по центру!

Пример:

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

Эти два решения требуют только двух вложенных элементов.
Первый - относительное и абсолютное позиционирование, если контент статичен (ручной центр).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

или для гибкого дизайна - вместо этого для точного информационного центра используйте следующий пример:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

Вам нужно установить min-height, если содержимое превышает 50% высоты окна. Этой высотой также можно управлять с помощью медиа-запроса для мобильных и планшетных устройств. Но только если Вы играете с адаптивным дизайном.

Я думаю, вы могли бы пойти дальше и использовать простой скрипт JavaScript / JQuery для управления минимальной или фиксированной высотой, если по какой-то причине в этом есть необходимость.

Во- вторых - если содержание жидкости у может также использовать таблицы и таблицы ячейки CSS свойства с вертикальным выравниванием и выравнивания текста по центру:

/*in a wrapper*/  
display:table;   

и

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

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

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

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

Не существует одного простого способа центрировать div по вертикали, который помогал бы в любой ситуации.

Однако есть множество способов сделать это в зависимости от ситуации.

Вот несколько из них:

• Установите верхний и нижний отступ родительского элемента, например padding: 20px 0px 20px 0px
• Используйте таблицу, ячейка таблицы центрирует свое содержимое по вертикали
• Установите относительную позицию родительского элемента, а div, который вы хотите центрировать по вертикали, на absolute и задайте стиль как top: 50px; внизу: 50 пикселей; например

Вы также можете найти в Google "вертикальное центрирование css"

переменная высота, верхнее и нижнее поле автоматически

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}

<div class="black">
<div class="message">
    This is a popup message.
</div>

переменная высота, верхнее и нижнее поле автоматически

Использование Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Посмотреть результат

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>