Html CSS布局，在屏幕中央放置一个div

再次介绍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
}

所以，我想把容器放在屏幕中央。

---

我也试过：margin:auto-无结果。

你试过

margin top:50%吗

您可能会成功。

最好的方法是使用

显示：表格单元格

和

垂直对齐：中间

（在IE7-上不起作用）

---

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

如果您知道#容器的高度和宽度，您可以执行以下操作：

在容器周围添加包装器div，并将其设置为position:relative

将#容器设置为位置：绝对，顶部：50%，左侧：50%，左侧边距：-XXXpx，顶部边距：-XXXpx，其中XXX值为#容器宽度和高度的一半

---

或者，您也可以使用此解决方案：

<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;
}

你好，世界，我是一个垂直对齐的div

分组{
显示：内联块；
垂直对齐：中间对齐；
}

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

如果您想使用css进行设置，应该通过填充手动设置。 或者，如果您希望它是动态的，您应该编写如下javascript：-

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

---

比如说：

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

---

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

CSS:

HTML

数据在这里

---

希望这有帮助，alltough看起来有点脏。谢谢。谢谢你，小华，这会有用的

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

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

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