如何防止浏览器的宽度影响文本的垂直位置？答案

【问题标题】：How can I prevent the browser's width from affecting the vertical position of text?如何防止浏览器的宽度影响文本的垂直位置？
【发布时间】：2013-04-13 22:57:25
【问题描述】：

我有以下 HTML 和 CSS

<body>
<p>Foo Foo Foo</p>
</body>

p {
    font-size: 50px;
    font-weight: 600;
    margin-top: 20%;
}

如果您要在浏览器中打开此代码，减小浏览器的宽度会使文本向上移动。避免这种情况的最简单方法是什么？

【问题讨论】：

这与您的问题有关，可能会回答：stackoverflow.com/questions/7266363/…
谢谢@RichardHaber - 已接受答案中的链接非常有用。 (w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties)
你见过视口单位（vw、vh、vmin）吗？ caniuse.com/#feat=viewport-units
@cimmanon 我没有，但感谢您的评论 - 这是一个非常有趣的帖子。

标签： html css

【解决方案1】：

我认为您对此无能为力。即使你做了一些事情来让它工作（比如让容器成为一个内联元素），它也将是一个 hack。

百分比是根据生成框的包含块的宽度计算的。 'margin-top' 和 'margin-bottom' 也是如此。

阅读更多W3

【讨论】：

【解决方案2】：

margin-top 值是根据视口（屏幕窗口）的宽度计算得出的。

您需要使用另一个相对单位，例如 em 或绝对单位，例如 px。

这部分取决于您尝试创建的效果。

参见参考：http://www.w3.org/TR/CSS2/box.html#margin-properties

【讨论】：