如何將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;
}