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