Выровнять по вертикали, используя CSS 3 - PullRequest
Новая
       2

Выровнять по вертикали, используя CSS 3

71 голосов
/ 24 марта 2011

С CSS 3, есть ли способ выровнять элемент блока по вертикали? У вас есть пример? Спасибо.

Ответы [ 8 ]

82 голосов
/ 16 апреля 2013

Недавно смотрел на эту проблему и попытался:

HTML: 

<body>
    <div id="my-div"></div>
</body>

CSS: 

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Вот скрипка:

http://jsfiddle.net/sTcp9/6/

Это работает даже при использовании «ширина / высота: авто» вместо фиксированных размеров. Протестировано на последних версиях Firefox, Chrome и IE (* gasp *).

34 голосов
/ 17 октября 2011

Примечание: В этом примере используется черновая версия модуля гибкой компоновки коробок .Он был заменен несовместимой современной спецификацией.

Центрируйте дочерние элементы блока div, используя вместе свойства box-align и box-pack.

Пример: 

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
32 голосов
/ 30 ноября 2012

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

.container {
    display: flex;
    /* Vertical align: */
    align-items: center;
    /* Horizontal align: */
    justify-content: center;
}

jsFiddle: http://jsfiddle.net/maars/8Uyvf

Поддержка браузера: http://caniuse.com/flexbox

9 голосов
/ 14 января 2012

пара способов:

1.Абсолютное позиционирование - вам нужно иметь заявленную высоту, чтобы сделать эту работу: 

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

* 2.Используйте дисплей: таблица http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. Более подробное руководство с использованием дисплея: таблица

http://css -tricks.com/vertically-center-multi-lined-text/

2 голосов
/ 10 октября 2015

Я всегда использую учебник из этой статьи для центрирования вещей.Это здорово 

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

  1. Сделать контейнер относительно позиционированным, что объявляет его контейнером для абсолютно позиционированных элементов.
  2. Makeсам элемент абсолютно позиционирован.
  3. Поместите его на полпути вниз контейнера с «верхом: 50%».(Обратите внимание, что здесь 50% означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент на половину его собственной высоты.(«50%» в «translate (0, -50%)» относится к высоте самого элемента.)
2 голосов
/ 05 мая 2014

Существует простой способ выравнивания по вертикали и горизонтали div в css.

Просто добавьте высоту к вашему div и примените этот стиль 

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Надеюсь, это помогло.

0 голосов
/ 12 марта 2014

Попробуйте это тоже отлично работает:

HTML: 

   <body>
    <div id="my-div"></div>
   </body>

CSS: 

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}
0 голосов
/ 24 марта 2011

Вы можете выровнять по вертикали, установив отображаемый элемент: inline-block, затем установив вертикальное выравнивание: по центру;

...