Выровнять текст по вертикали внутри элемента с процентной высотой?

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

Если вы установили размер шрифта и знаете, сколько строк текста у вас есть. Вы можете обернуть текст в промежуток. И используйте следующий CSS на span.

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

Answer 3

Вы должны установить значение высоты div, а затем установить line-height: value_of_div_height. line-height 100% не будет работать, потому что он будет принимать значение текста, а не элемента div. Работает с выравниванием по вертикали или без него, если высота = высота строки

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>