CSS:垂直对齐元素的内容

Question

我需要垂直对齐一个 span，但是让这件事变得复杂的是这个 span 需要占据它的整个父级。像这样的 jsfiddle

所以，HTML 是

<div>
    <span>OK</span>
</div>

CSS:

div {
     width: 200px;
     height: 200px;
     background-color: lightgrey;
}

span {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

这是否可以在不更改 html 的情况下实现？

更新:虽然下面的答案都是正确且有趣的，但我选择了我实际使用过的那个才是正确的!

Answer 1

让它表现得像一张 table :

div {
    width: 200px;
    height: 200px;
    background-color: lightgrey;
    display: table;
}
span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

http://jsfiddle.net/9uaE6/2/