javascript - 在 body 内垂直对齐我的 div

Question

有没有一种 CSS 方法可以在 body 元素内垂直对齐我的 div？

问题是我的 div 每次都会有不同的高度，所以它不是恒定的。

这些是我尝试过但它们不起作用的方法:

body { vertical-align: middle; }

#mainContent { 
   vertical-align: middle;
}

// Also this
body { margin-top: 20%; margin-bottom: 20%; }

Answer 1

我在没有表格的情况下做到了:( demo on dabblet.com )

这个演示中的主要技巧是在元素从上到下的正常流动中，因此 margin-top: auto 设置为零。然而，对于绝对定位的元素来说，自由空间的分布是一样的，同样可以在指定的 top 和 bottom 垂直居中(在 IE7 中不起作用)。

这个技巧适用于任何大小的 div。

HTML:

<div></div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}