2

再次关于 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 放置在屏幕中央。
我也试过：margin:auto - 没有结果。

4

8 回答 8

2

最好的方法是使用display: table-celland vertical-align: middle（在 IE7 上不起作用）。

因为我们没有你的 HTML，我能做的最好的就是链接你这篇文章，它向你展示了实现它的所有不同方法。

于 2012-07-20T15:25:51.403 回答
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;
}
于 2012-07-20T15:27:19.463 回答
2

如果你想用 css 来做，你应该通过填充手动设置它。否则，如果您希望它是动态的，您应该编写如下的javascript：-

var a = window.outerHeight;
var b = $('#id of div').height();
var c = (a-b)/2;
$('#id of div').css("margin-top",c);
于 2012-07-20T15:29:25.803 回答
2

怎么样的东西：

#container{
width:979px;
height:590px;
position:absolute;
left:50%;
top:50%;
margin:-295px 0 0 -490px;
}
于 2012-07-20T15:29:51.407 回答
1

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

于 2012-07-20T15:24:02.933 回答
1

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

  1. 在容器周围添加一个包装器 div 并将其设置为 position:relative
  2. 将 #container 设置为 position:absolute, top:50%, left:50%, margin-left:-XXXpx, margin-top:-XXXpx 其中 XXX 值是 #container 宽度和高度的一半。
于 2012-07-20T15:26:04.560 回答
1

我认为您正在寻找垂直居中，有一个关于如何做到这一点的博客。希望有帮助。

于 2012-07-20T15:27:47.143 回答
0

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

CSS：

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

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

HTML

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

希望这可以帮助

于 2012-07-20T17:12:21.013 回答