Problem with vertical-align: middle;

Question

How does div sub set div center to middle? Text can be different, so margin or line-height in this situation is not a good solution.

CSS:

.center {
    background-color: #336699;
    width: 200px;
    height: 200px;
}

.sub {
    display: inline-block;
    vertical-align: middle;
}

HTML:

<div class="center">
    <span class="sub">
        Some text text...
    </span>
</div>

Answer 1

A possible solution is:

HTML

<div class="center">
    <span class="sub">
        Some text text...<br />
        An some more text...
    </span>
</div>

CSS

.center
 {
     background-color: #336699;
     width: 200px;
     height: 200px;
     display: table;
 }

.sub
 {
     display: table-cell ;
     vertical-align: middle;
     text-align: center;
 }

A live demo, if needed, are at http://jsfiddle.net/vladsaling/6nTGF/.