Question

我需要垂直对齐一个范围，但是使这个复杂的事情是这个范围需要占据整个父级。像这样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

告诉它表现得像一张桌子：

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/

Answer 2

你可以用鬼魂来实现这个目标。伪元素

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

span:before {
    content: "";
    display:inline-block;
    vertical-align: middle;
    height: 100%;
}

示例：http://jsfiddle.net/9uaE6/11/

Answer 3

div{ 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:start;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:start;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:start;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:start;
box-align:center; 
}

来源：ms-flex

your Updated Fiddle

CSS：垂直对齐元素的内容

3 个答案: