在100％高度的div中垂直居中放置文字？

小编典典

在100％高度的div中垂直居中放置文字？

css

我正在使用的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;
}

阅读 1084

2020-05-16

共1个答案

小编典典

这个答案不再是最好的答案…请参阅下面的flexbox答案！

为了使其完全居中（如大卫的回答中所述），您需要添加负的上边距。如果您知道（或强制）只有一行文本，则可以使用：

margin-top: -0.5em;

例如：

//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>

最初接受的答案不会在文本的中间垂直居中（其居中位置取决于文本的顶部）。因此，如果您的父母不是很高，则根本不会居中，例如：

//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>

2020-05-16