javascript - 在页面中间居中动态 Div 的最佳方式

Question

我知道这类问题已经被问了很多，但我希望能够将一个 div 居中放置在页面中间，并且无论它有多宽或多高，它始终位于页面中间。

我猜测最好使用一些 javascript 来计算元素的宽度，然后将其减半以减去边距。

为了把事情弄清楚，这种事情:

.myDivHere {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    width: 20%;
    height: 20%;
    margin-left: -273px; /*half width set by js script*/
    margin-top: -132px; /*half height set by js script*/
}

我已将宽度和高度设置为 20%，因为我希望此 div 能够保持其相对于浏览器窗口的大小(用于移动支持等)。有什么想法吗？

Answer 1

除非我遗漏了一些你可以放弃 JavaScript 并使用纯 CSS 的东西:

div {
    position:absolute;
    background:red;
    width:20%;
    height:20%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

jsFiddle example