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

小编典典

这个答案不再是最好的答案…请参阅下面的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:

Text that is suppose to be centered

​

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

//CSS:

#parent

{

position:relative;

height: 3em;

border: 1px solid black;

}

#child

{

position: absolute;

top: 50%;

}​

//HTML:

Text that is suppose to be centered

​

2020-05-16