如何将div从上到下居中？

Question

我只希望 div 位于页面的中心，从上到下的间距相等，我需要使用百分比，因为 div 内容不同。 我试过底部：50% 但这不起作用。

感谢您的回答！ 我的有点不同，没有添加这个是我的错误，请访问我的博客查看问题。

大家好，感谢您花时间回答这么愚蠢的问题，但我发现最简单的方法是使用填充：

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

然后把它弄乱看看你的结果是什么。 如果你有更好的东西，请分享，因为这显然不是最可靠的。

Answer 1

您在填充中使用百分比的答案并不适用于所有情况。 这是因为填充百分比基于您添加填充的元素的宽度，而不是它的高度。 另外，它根本不是基于您希望元素居中的容器。 因此，如果您要减小浏览器窗口的宽度，则 DIV 将移动到浏览器窗口中不再居中的位置，因为 DIV 的宽度已更改，从而导致填充的百分比值也发生更改。

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

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

Answer 2

vertical-align:center垂直对齐，然后text-align:center水平text-align:center

Answer 3

#mydiv {
  position:absolute;
  top:20%; bottom:20%
}

另请参阅了解垂直对齐。

Answer 4

#div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
height:100px;
width:100px;
}

此代码从下到上或从左到右对齐，但您必须设置宽度和高度。
或者使用这个：

#div{
display:flex;
align-items:center;
}