Question

再次关于css布局：

#container{
width:979px;
height:590px;
margin-left:auto; //works
margin-right:auto; //works
margin-top:auto; //doesn't work
margin-bottom:auto; //doesn't work
}

所以，我希望#container放在屏幕的中心我也试过：保证金：自动 - 没有重新开始。

Answer 1

最好的方法是使用display: table-cell和vertical-align: middle（它不适用于IE7）。

因为我们没有您的HTML，所以我能做的最好的事情是链接到您this article，它会为您提供实现它的所有不同方法。

Answer 2

或许您可以使用此解决方案：

<div class="container">
    <div class="block">
        <p>Hello world, i'm a vertical align div !</p>
    </div>    
</div>

div.bloc { 
    display:inline-block;
    vertical-align:middle;
}

Answer 3

如果你想用css做，你应该通过填充手动设置它。或者如果你想要它是动态的，你应该写一个如下的javascript： -

var a = window.outerHeight;
var b = $('#id of div').height();
var c = (a-b)/2;
$('#id of div').css("margin-top",c);

Answer 4

如下：

#container{
width:979px;
height:590px;
position:absolute;
left:50%;
top:50%;
margin:-295px 0 0 -490px;
}

Answer 5

你有没有尝试margin-top:50%;你可能会成功。

Answer 6

如果你知道#container的高度和宽度，你可以执行以下操作：

在容器周围添加包装器div并将其设置为position：relative
将#container设置为position：absolute，top：50％，left：50％，margin-left：-XXXpx，margin-top：-XXXpx其中XXX值是#container的宽度和高度的一半

Answer 7

我认为您正在寻找垂直居中，有blog关于如何做到这一点。希望对你有所帮助。

Answer 8

如果您只想将容器放在屏幕中央。试试这个

CSS：

html, body { margin:0; padding:0; }

#container{
width:979px;
height:590px;
margin:0 auto;
}

HTML

<div id="container">
Data goes here
</div>

希望这有帮助

CSS布局将div放在屏幕的中心

8 个答案: