TDの完全な高さ、垂直方向のテキストが中間にある

Question

私はこの質問がここに数回置かれていたが、適切な答えを見つけられなかったことを知っている。 divの完全な高さをtdにするための回避策を管理しました。しかし、テキストを中央に縦に並べることは不可能です。どのように私はこれを達成することができます考え？私はそれが敏感であることを望みます。私はすべてのデバイスで作業することを意味します。ありがとう。あなたのdivに次のCSSを追加

<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

あなたのコードのいずれかを見ることなく、それはあなたに正確な答えを与えるには少し難しいです。それはまた、必要な場合は

.text-container { 
    position: relative; 
} 

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

が水平方向にセンタリングされるように、次のコマンドを使用します。しかし、（限り、あなたはIE9以下のものをサポートする必要がないので）、特に応答ソリューションのため、この問題を解決するための私のお気に入りの方法は以下のとおりです。以下の追加と変換プロパティを置き換える：

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

編集：スペースを埋めるために、相対位置でfiddleを更新 - は、最終的に完全に中心の結果を示しています。

Answer 2

試してみてください。

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

が表示属性はdiv要素には効果があります垂直整列スタイルを意味し、より多くのテーブルセルのように動作するようになります。

例：http://codepen.io/JasonGraham/pen/aZbdmy