Div полная высота TD, с текстом по вертикали

Question

Я знаю, что этот вопрос был задан несколько раз здесь, но не нашел правильного ответа. Мне удалось обходное решение, чтобы сделать div полной высоты td. Но кажется невозможным выровнять текст по центру вертикально. Любая идея, как я могу это сделать? Я бы хотел, чтобы он был отзывчивым. Я имею в виду работать на всех устройствах. Благодарю.

<tr> 
    <td> 
     Small text 
    </td> 
    <td class="" style="height: 1px; height: 100%"> 
     <div style="position: relative"> 
      <span class="centered-text"> A very long text that I want to be centered inside parent div and of course parent td.</span> 
     </div> 
    </td> 
</tr> 

Answer 1

не видя вашего кода, это немного трудно, чтобы дать вам точный ответ. Но мой любимый метод для решения этой проблемы, особенно для чувствительных решений, (до тех пор, пока вы не должны поддерживать все, что ниже IE9) заключается в следующем:

.text-container { 
    position: relative; 
} 

.centered-text { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

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

.centered-text { 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Edit: обновленные fiddle с позиции относительно того, чтобы заполнить пространство - показывает окончательный полностью центрированный результат.

Answer 2

Попробуйте добавить следующий CSS для вашего DIV:

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

Атрибут дисплея заставит ДИВ вести себя как ячейку таблицы, то есть вертикальный стиль выравнивания будет иметь эффект.

Пример: http://codepen.io/JasonGraham/pen/aZbdmy