如何将div从上到下居中？答案

【问题标题】：How to center a div from top to bottom?如何将div从上到下居中？
【发布时间】：2011-06-08 22:40:15
【问题描述】：

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

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

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

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

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

【问题讨论】：

这看起来像是一个答案stackoverflow.com/questions/1205457/…
看看这个：jakpsatweb.cz/css/css-vertical-center-solution.html
Vertical Align an element in CSS的可能重复
其实我可能已经通过填充弄清楚了。
@Earl - 大声笑我实际上已经把它作为我的答案，但不是 100% 确定所以我删除了它。您应该在“答案”部分中回答您自己的问题，这样您就可以通过回答自己的问题获得声望分。

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

另见Understanding Vertical Align。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：