Div вертикальное выравнивание css

Ответ 1

Вы можете использовать line-height: 50px;, вам не понадобится vertical-align: middle;.

Демо

Вышеуказанное не удастся, если у вас несколько строк, поэтому в этом случае вы можете обернуть текст с помощью span и использовать display: table-cell; и display: table; вместе с vertical-align: middle;, также не забудьте использовать width: 100%; для #abc

Демо

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

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

Другим решением, которое я могу здесь придумать, является использование свойства transform с translateY(), где Y, очевидно, обозначает Y-ось. Это довольно просто. Все, что вам нужно сделать, - установить положение элементов в absolute и более позднюю позицию 50% из top и перевести с нее ось с отрицательным -50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Демо

Обратите внимание, что это не будет поддерживаться в старых браузерах, например IE8, но вы можете сделать IE9 и другие более старые версии браузера Chrome и Firefox с помощью префиксов -ms, -moz и -webkit соответственно.

Более подробную информацию о transform можно найти здесь .

Ответ 2

Это просто: дайте родительскому div this:

display: table;

и дайте дочернему div (s):

display: table-cell;
vertical-align: middle;

Что это!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Ответ 3

Старый вопрос, но в настоящее время CSS3 делает вертикальное выравнивание действительно простым!

Просто добавьте в #abc следующий css:

display:flex;
align-items:center;

Простая демонстрация

Оригинальная демо-версия обновлена ​​

Простой пример:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Ответ 4

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

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

Прочитайте полную статью здесь.

Ответ 5

Вы можете использовать высоту линии как высоту div. Но для меня лучшим решением является это → position:relative; top:50%; transform:translate(0,50%);

Ответ 6

Как добавить line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Fiddle, line-height

Или padding на #abc. Это результат с дополнением

Обновление

Добавьте в свой css:

#abc img{
   vertical-align: middle;
}

Результат. Надеюсь, это то, что вы ищете.

Ответ 7

Попробуйте следующее:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Другой метод центрирования div:

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

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Ответ 8

Используйте CSS-свойство translateY для вертикального центрирования вашего текста в этом контейнере.

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

А затем примените его к вашей содержащей DIV

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Отрегулируйте процент перевода в соответствии с вашими потребностями. Надеюсь это поможет

Ответ 9

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="text-align-center"> Align center</div>

Ответ 10

Этот код для вертикального среднего и горизонтального выравнивания по центру:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}