css – 垂直中心的文字在100％的高度div？

我正在使用一个div，它是父div的高度的100％。

div只包含一行文本。

div不能有固定的高度。

所以我的问题是。

如何垂直居中的文字行？

我试过使用：

display: table-cell;  
line-height:200%;

如果重要的是div是绝对定位的。

当前CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}

解决方法

为了使其完美的中心(如 david’s answer所述)，您需要添加负顶点。如果你知道(或强制)只有一行文本，你可以使用：

margin-top：-0.5em;

例如：

http://jsfiddle.net/45MHk/623/

//CSS:
html,body,div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

最初接受的答案不会垂直中心在文本的中间(它以文本的顶部为中心)。所以，如果你的父母不是很高，就不会以中心为中心，例如：

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

css – 垂直中心的文字在100％的高度div？

解决方法

相关文章