Question

为什么设置为1000px高度的div不能接受上边距的百分比是否有任何理由？此代码演示了此问题：

    <html>
    <body>
        <div style='height: 1000px; margin-top: 50%; font-size: 30pt;'>
            this is displayed at the bottom of the 1920 x 1080 monitor...
        </div>
    </body>
    </html>

为什么文本显示在1920 x 1080显示器中间的某处而不是底部？

Answer 1

这是因为保证金上的%值并未引用该元素的height。

请参阅包含块的宽度

在这种情况下，将是width代码的body。

使用下一个代码段，您可以尝试在整页中打开并调整浏览器的宽度，您将看到基于此的边距更改。

body {background:#eee;}
div {background:#ccc;}

<div style='height: 1000px; margin-top: 50%; font-size: 30pt;'>
  this is displayed at the bottom of the 1920 x 1080 monitor...
</div>

这个问题可以为您澄清在某些CSS属性中使用％

`https://stackoverflow.com/a/26412875/2887133`

Answer 2

你可以使用＆＃34; vh＆＃34;而不是＆＃34;％＆＃34;。尝试设置：

<div style='height: 1000px; margin-top: 50vh; font-size: 30pt;'>

这会将上边距设置为视口的50％（在您的情况下为浏览器窗口）。

Answer 3

保证金按预期工作。当你申请保证金最高时：50％;它下降了50％所以它在底部而不是居中。你需要像这样做中心：

<div style='height: 1000px; position: relative; top:50%; margin-top: -500px; font-size: 30pt;'>

HTML百分比上限

3 个答案:

这个问题可以为您澄清在某些CSS属性中使用％

`https://stackoverflow.com/a/26412875/2887133`