使用twitter bootstrap中心内容

Question

我正在创建一个登录屏幕,其中有一个登录框,无论用户具有什么分辨率,我都希望它出现在屏幕中央(水平和垂直).

我环顾四周,只能找到水平居中内容的教程/文章,这是我想要的一半.

知道如何在两个平面上实现集中化吗？

Answer 1

最好的方法是使用CSS和旧版IE的Javascript回调.

CSS

.center {
   width: 300px;          // your login div width
   height: 300px;         // your login box height
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;   // width/2
   margin-top: -150px;    // height/2
}

HTML

<div class="center">
    Hey dude, I'm in the middle!
</div>

实例

http://jsfiddle.net/86Asb/

负边距正好是高度和宽度的一半,将元素拉回到完美的中心.仅适用于固定高度/宽度的元素.这将适用于除IE6,IE7之外的所有浏览器.