вертикальне вирівнювання середини в <div>

Я хочу , щоб зберегти висоту #abc divв 50pxі текст для вирівнювання по вертикалі в середині div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

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

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Ви можете використовувати 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 Axis. Це досить прямо вперед ... Все, що вам потрібно зробити, - це встановити положення елементів у 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, ви можете звернутися тут .

Це просто: дайте батьківському діві це:

display: table;

і дайте дитині діви (и) це:

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>

Старе питання, але сьогодні 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>

Я знайшов це рішення Себастьян Екстрем. Це швидко, брудно і працює дуже добре. Навіть якщо ви не знаєте зріст батька:

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

Прочитайте повну статтю тут .

Ви можете використовувати висоту лінії, велику як висоту діва. Але для мене найкращим рішенням є це ->position:relative; top:50%; transform:translate(0,50%);

Як щодо додавання 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;
}

Скрипка, лінія-висота

Або paddingна #abc. Це результат з підкладкою

Оновлення

Додайте у свій css:

#abc img{
   vertical-align: middle;
}

Результат . Сподіваємось, що це ви шукаєте.

Спробуйте це:

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

Ще один метод центрування діва:

<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;
}

Використовуйте властивість translateY CSS, щоб вертикально центрувати текст у контейнері

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

Відрегулюйте відсоток перекладу відповідно до ваших потреб. Сподіваюся, це допомагає

Цей код призначений для вертикального середнього та горизонтального центру Порівняти без вказаної фіксованої висоти:

.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%);
}