css - 要素内のテキストをパーセンテージの高さで垂直に配置しますか？

Question

高さのパーセンテージを持つ要素があるため、行の高さのハックを使用できません。誰かがこれを解決する方法について何かアイデアがありますか？

<div height="100%">
    I want to be vertically aligned in the middle
</div>

Answer 1

必要なものは次のとおりです：http ：//www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

Answer 2

divの高さの値を設定してから、line-height：value_of_div_heightを設定する必要があります。line-height 100％は、div要素ではなく、テキストの値を取るため、機能しません。height = line-heightである限り、vertical-alignの有無にかかわらず機能します

div {
    height: 200px;
    line-height: 200px;
    display: block;
}

div要素内の段落を使用する場合の代替方法：http ：//www.w3.org/Style/Examples/007/center

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

Answer 3

font-size を設定していて、テキストの行数がわかっている場合。テキストをスパンでラップできます。そして、スパンで次の CSS を使用します。

span {
    font-size:20px;
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
    position: relative;
    top: 50%;
}