Использование поля: авто для вертикального выравнивания 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

11 80
html css centering

11 ответов:

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

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.

133

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

если отображение вашего родительского контейнера 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 который использует размер относительно видового экрана.

хотя поддержка браузеров для flexboxes находится на рекордно высоком уровне во время публикации, многие браузеры по-прежнему не поддерживают его или требуют префиксов поставщиков. См.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>
64

вот лучшее решение, которое я нашел: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

56

ни одно из решений на этой странице не работает (для меня).

мое решение

HTML-код

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

CSS

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

Я знаю, что вопрос с 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; 
}
9

если вы знаете высоту 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/

7

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

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

или для проектирования жидкость - для точного использования content center ниже пример вместо этого:

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

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

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

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

второй -если содержимое жидкое u также может использовать таблицу и таблицу-ячейку 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/

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

2

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

, есть много способов сделать это в зависимости от ситуации.

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

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

вы также можете google для "CSS вертикального центрирования"

0

переменная высота, маржа сверху и снизу авто

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

переменная высота, маржа сверху и снизу авто

0

С Помощью 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 */
}

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

0

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>
0