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

Answer 2

在jQuery中，您可以使用.width()和.height()方法，因为它们返回计算出的宽度（以像素为单位），而不是百分比+，您需要监听窗口resize事件。例如：

$(function() {
    function updateDivPosition() {
        var myWidth = $( '.myDivHere' ).width()
          , myHeight = $( '.myDivHere' ).height();
        $( '.myDivHere' ).css( { 
            marginLeft: -( parseInt( myWidth, 10 ) / 2 ) + 'px',
            marginTop: -( parseInt( myHeight, 10 ) / 2 ) + 'px'
        });
    }
    updateDivPosition(); // first time set correct position on onload
    $( window ).resize( updateDivPosition ); // update on window resize
});

jsFiddle demo

Answer 3

Here is you go.

应该注意的是，这个答案更多地是关于概念，而不是直接给出答案。

现在，你看到CSS的'div＃b'部分了吗？要将所有内容保持在中心位置，只需编写一个脚本，使页边距值保持高度的-50％。就是这样！

实施例：（当前）height = 60，margin-top = -30px（更改为height = 100）height = 100，margin-top = -50px

div#a
{
    width: 300px;
    height: 300px;
    border-width:1px;
    border-style: solid;

    /* important stuff below */
    display: inline-block; 
}

div#b
{
    width: 60px;
    height: 60px;
    background-color: red;

    /* important stuff below */
    position: relative;
    margin: -30px auto 0 auto;
    top: 50%;    
}

Answer 4

这是一个codepen：

Check it out.

大多数样式都不是必需的，javascript绝对没必要。垂直居中的关键是display: table。它需要一些嵌套，所以我也改变了你的结构。

中间动态分区的最佳途径

4 个答案: