Вертикальный выравнивающий диапазон внутри div

http://jsfiddle.net/UmHNL/2/

<div class="container">

    <span>Some text, yay</span>

</div>

<div class="container">

    <span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>

</div>
<style>
.container {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 1px solid black;
}

.container span {
    padding-left: 30px;
}
</style>

Это решение отлично работает до тех пор, пока ширина экрана не станет слишком маленькой - разбив мой текст на несколько строк.

Когда я решаю проблему, я нахожу так много сумасшедших сложнейших решений с javascript и divs, чтобы подталкивать мой контент на место. Может ли кто-нибудь помочь мне сделать эту работу без добавления дополнительной разметки?:)

Нет необходимости поддерживать браузер Internet Explorer и более старые версии.

Спасибо

Ответы

.container {
  width: 100%;
  height: 50px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.container span {
}

.container {
    width: 100%;
    height: 50px;
    border: 1px solid black;
    display: table;
    text-align: center;
}

.container span {
    display: table-cell;
    vertical-align: middle;
}