如何将div从上到下居中？

Question

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

嘿伙计们，谢谢你们的答案！我有点不同，我没有添加此内容，请访问my blog查看问题。

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

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为水平

Answer 3

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

另见Understanding Vertical Align。

Answer 4

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

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

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