CSS Центрирование текста по вертикали

Question

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

HTML

<div class="first"> 
    <div class="second"> 
     <span>TESTING</span> 
    </div> 
</div> 

CSS

div.first > div.second { 
    border: 1px solid red; 
    height: 2em; 
} 

div.first > div.second > span{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Почему текст не вертикальный центр? Fiddler

Относительно меняю значение свойства css на высоту текста, начинающийся с центра.

Может кто-нибудь объяснить мне, почему это работает так?

Answer 1

Пролет не является элементом блока. Обратите внимание: если вы добавите display: block в свой CSS, он будет вертикально выровнен.

div.first > div.second > span{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    display: block; 
} 

Или вы можете изменить свой диапазон на div.

Answer 2

Правильный способ иметь элемент вертикально центр является,

Установить эффективный DIV-х position с absolute шириной top значение 50% и установить родителя position к relative.

Пример:

div.first > div.second { 
    position: relative; 
} 
div.first > div.second > span { 
    position: absolute; 
    top: 50%; 
} 

DEMO

height против line-height

• height является вертикальное измерение емкости.
• line-height это расстояние от вершины первой строки до верхней части второй линии.

Поскольку у вас есть только одна строка текста, вы видите ее в середине контейнера. Попробуйте добавить еще одну строку текста, и вы ясно поймете.