如何将div从上到下居中？

Question

我只希望div位于页面的中央，上下间距相等，并且我需要使用百分比，因为div的内容会有所不同。我尝试了bottom：50％，但这不起作用。

大家好，谢谢您的回答！我的略有不同，这是我的错误，不添加此内容，请访问我的博客以查看问题。

大家好，感谢您抽出宝贵的时间回答这样一个愚蠢的问题，但我发现最简单的方法是只使用padding：

padding-top:X%;
padding-bottom:X%;

然后将其弄乱，看看结果如何。如果您有更好的选择，请共享，因为这显然不是最可靠的。

Answer 1

在填充中使用百分比的答案并非在所有情况下都有效。这是因为填充百分比是基于要添加填充的元素的宽度，而不是其高度。另外，它根本不是基于您要元素居中放置的容器。因此，如果要减小浏览器窗口的宽度，则DIV会移至不再位于浏览器窗口中心的位置，因为DIV的宽度已更改，从而导致填充的百分比值也发生了变化。

无论浏览器窗口尺寸如何，要使居中DIV真正居中，下面的代码应有很大帮助：

  .div {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }