Question

我一直在尝试将文字设置为屏幕的中心。所以我在一个文本中直接放置了一个带有一些文本的div，并将其高度添加到50％，margin-top为50％。我认为这将使得div的最高位置始终保持在50％。但我错了。

HTML：

<div id="test">test.. !</div>

CSS：

html, body {
    width:100%;
    height:100%;
    margin:0;
}
div {
    margin-top:50%;  
    text-align:center;
    width:100%;
    height:50%;
}

你对它为什么行为不端有任何想法吗？请不要提出任何新想法。我知道其他的想法，以集中它。但我想知道为什么这个片段不起作用。

DEMO

Answer 1

这主要是关于什么？＆＃34;

的50％的问题

将div的高度设置为50%会使其高度为其容器的50％，在本例中为body元素。

将margin-top设置为50%，然后将上边距设置为div的宽度的一半。

请在SO上查看此问题以获得澄清：Why are margin/padding percentages in CSS always calculated against width?

此外，上边距应用于div的父级和上边缘之间，而不是垂直中心。

所有这些因素都会导致div未在其容器中居中。

Answer 2

试试这个

 html, body {
        width:100%;
        height:100%;
        margin:0;

    }
div {
    width:100%;
    height:50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; 
   right: 0;
    text-align:center;
    border:1px solid black;
}

DEMO-JSFiddle

根据流体边距不起作用将文本居中到页面

DEMO

2 个答案: