1

我知道这种事情已经被问了很多，但我希望能够将一个 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 能够保持其相对于浏览器窗口的大小（用于移动支持等）。有任何想法吗？

4

4 回答 4

4

除非我遗漏了一些东西，否则你可以放弃 JavaScript 并使用纯 CSS：

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

jsFiddle 示例

于 2013-10-30T19:17:07.207 回答
0

这是一个代码笔：

一探究竟。

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

于 2013-10-30T19:20:20.677 回答
0

给你。

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

现在，您看到 CSS 的“div#b”部分了吗？要将所有内容保持在中心，只需编写一个脚本，将 margin-top 值保持为高度的 -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%;    
}
于 2013-10-30T19:19:47.963 回答
0

在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 演示

于 2013-10-30T19:14:16.890 回答