Как вертикально центрировать divs?

Ответ 1

Лучший подход в современных браузерах - использовать flexbox:

#Login {
    display: flex;
    align-items: center;
}

Некоторым браузерам понадобятся префиксы поставщиков. Для старых браузеров без поддержки flexbox (например, IE 9 и ниже) вам необходимо реализовать резервное решение, используя один из более старых методов.

Рекомендуемое чтение

• Поддержка браузера
• Руководство по Flexbox
• Использование гибких блоков CSS

Ответ 2

Вы можете вертикально выровнять div в другом div. См. этот пример в JSFiddle или рассмотрите пример ниже.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

Маркер .innerDiv должен быть в таком формате: margin: auto *px;

[Где * - ваше желаемое значение.]

display: inline-flex поддерживается в последних (обновленных/текущих версиях) браузерах с поддержкой HTML5.

Возможно, он не работает в Internet Explorer: P:)

Всегда пытайтесь определить высоту для любого вертикально выровненного div (т.е. innerDiv) для противодействия проблемам совместимости.

Ответ 3

Это можно сделать с помощью 3 строк CSS и совместимо с (и в том числе) IE9:

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

Пример: http://jsfiddle.net/cas07zq8/

кредит

Ответ 4

Если вы знаете высоту, вы можете использовать абсолютное позиционирование с отрицательным margin-top следующим образом:

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

В противном случае нет реального способа вертикально центрировать div только с CSS

Ответ 5

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

Вы используете атрибут :before css, чтобы вставить div в начало родительского div, дать ему display:inline-block и vertical-align:middle, а затем предоставить те же свойства дочернему div. Поскольку vertical-align для выравнивания вдоль строки, те встроенные divs будут считаться линией.

Сделайте :before div height:100%, и дочерний div будет автоматически следовать и выровнять по середине очень высокой "линии".

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

Вот скрипка, чтобы продемонстрировать, о чем я говорю. Детский div может быть любой высоты, и вам никогда не придется изменять его поля /paddings.
И здесь более пояснительная скрипка.

Если вы не любите :before, вы всегда можете вручную добавить div.

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

А затем просто переназначьте .parent:before на .parent .before

Ответ 6

Я нашел этот сайт полезным: http://www.vanseodesign.com/css/vertical-centering/ Это сработало для меня:

HTML

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

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

Ответ 7

@комментарий GáborNagy еще одно сообщение было самым простым решением, которое я мог найти и работал как прелесть для меня, так как он привел jsfiddle, я копирую его здесь с помощью небольшое дополнение:

CSS

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

Если вы хотите также выровнять его по горизонтали, вам нужно добавить еще одну "внутреннюю ячейку" div внутри "cell" div и присвоить ей этот стиль:

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

Ответ 8

Вертикальное выравнивание всегда было сложным.

Здесь я прикрыл некоторый метод вертикального выравнивания div.

http://jsfiddle.net/3puHE/

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

Ответ 9

http://jsfiddle.net/dvL512e7/

Если выровненный div не имеет фиксированной высоты, попробуйте использовать следующий CSS для выровненного div:

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}

Ответ 10

В моем firefox и chrome это:

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

Ответ 11

если вы используете фикс высоты высоты, чем вы можете использовать padding-top в соответствии с вашими потребностями дизайна. или вы можете использовать верх: 50%. если мы используем div, чем вертикальное выравнивание, не работает, поэтому мы используем верхнюю часть или позицию по потребности.

Ответ 12

Я нашел способ, который отлично подходит для меня. Следующий script вставляет невидимое изображение (то же, что и bgcolor или прозрачный gif) с высотой, равной половине размера пробела на экране. Эффект - идеальное вертикальное выравнивание.

Скажите, что у вас есть заголовок div (height = 100) и div нижнего колонтитула (высота = 50), а содержание в главном div, которое вы хотите выровнять, имеет высоту 300:

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>   

Вы помещаете script непосредственно перед содержимым, которое вы хотите выровнять!

В моем случае содержание, которое мне нравилось выравнивать, было изображение (ширина = 95%) с соотношением сторон 100: 85 (ширина: высота). Средняя высота изображения составляет 85% от его ширины. Ширина составляет 95% от ширины экрана.

Поэтому я использовал:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

Объедините этот script с

<body onResize="window.location.href = window.location.href;">

и вы получите ровное вертикальное выравнивание.

Надеюсь, это сработает и для вас!

Ответ 13

Мне нужно было указать min-height

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em

Ответ 14

попробуйте этот?

.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}

надеюсь, что это поможет

Ответ 15

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