CSS布局放置一个div屏幕

中心再次约CSS布局：CSS布局放置一个div屏幕

#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 - 没有resutl。

来源

2012-07-20 Alice

什么是这样的：

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

来源

2012-07-20 15:29:51 gabrielhilal

作品，一切似乎有点肮脏。谢谢。 – Alice 2012-07-20 15:38:26

你有没有试过margin-top:50%;你可能已经成功了。

来源

2012-07-20 15:24:02

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

因为我们没有你的HTML，所以我能做的最好的就是链接你this article，它为你呈现了实现它的所有不同方法。

来源

2012-07-20 15:25:51 Calvein

如果你知道你的#container可以做以下的高度和宽度：

添加一个包装的div围绕容器，并将其设置的位置是：相对
设置#container的是位置：绝对，top：50％，left：50％，margin-left：-XXXpx，margin-top：-XXXpx其中XXX值是#container的宽度和高度的一半。

来源

2012-07-20 15:26:04

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

<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-20 15:27:19 Hakadel

Thamks，似乎解决了。 – Alice 2012-07-20 15:30:55

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

来源

2012-07-20 15:27:47 xiaowl

谢谢，xiaowl，这将是有用的 – Alice 2012-07-20 15:39:50

如果你想用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-20 15:29:25

如果妳只想容器中的中心放置屏幕。试试这个

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-20 17:12:21

CSS布局放置一个div屏幕

回答

相关问题