Подтвердить что ты не робот

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Если отображение родительского контейнера flex, то да, margin: auto 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>

Ответ 4

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

Мое решение

Html

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

CSS

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

I gues. Вы можете пойти дальше и использовать простой JavaScript/JQuery script для управления минимальной высотой или фиксированной высотой, если есть какая-то необходимость.

Seckound - Если содержимое является текучим, вы также можете использовать свойства css и table-cell cls с вертикальным выравниванием и выравниванием по тексту:

/*in a wrapper*/  
display:table;

и

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

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

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

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

Ответ 8

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

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

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

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

Вы также можете использовать Google для "css вертикального центрирования"

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

Показать результат