我只是尝试将div垂直居中于100vh页面。
div是84px高，所以我做了：
margin-top: calc(50% - 42px);
但似乎浏览器总是占用外部div的宽度，而不是外部div的高度（100vh）。我怎样才能使用高度的百分比，而不是div？
答案 0 :(得分：2)
但似乎浏览器总是占用外部div的宽度
是。请参阅the specification，其中包含：
百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。
如何使用高度的百分比
你不能，至少不能使用简单的CSS。
如果您确实需要在运行时计算值，则可以使用JavaScript。
由于您知道高度（您明确指定为100vh），因此您可以使用该值。
margin-top: calc(50vh - 42px);
如果您不想重复自己，那么您可以使用预处理器，例如SASS，这样可以将100vh存储在变量中。
答案 1 :(得分：1)
您的代码失败，因为边距是根据实际元素的宽度计算的，无论哪个元素。当你说margin-top: 50%时，它意味着＆＃34;这个元素宽度的50％＆＃34;。
由于你知道包含元素的高度是100vh而你想要50％，只需使用50vh代替50%.