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。

Answer 2

我知道垂直居中项目的唯一方法是使用javascript。这是一个简单的例子，说明如何使用jquery和通过CSS进行绝对定位。链接到jsfiddle和要遵循的代码。

http://jsfiddle.net/AlienHoboken/XCPGe

使用Javascript：

$(document).ready(function() {
  var width = $('#test').css('width');
  var height = $('#test').css('height');
  width = width.replace('px', '');
  height = height.replace('px', '');
  $('#test').css('left', ($(window).width()/2) - (width/2));
  $('#test').css('top', ($(window).height()/2) - (height/2));
});

CSS：

#test {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000000;
}

Answer 3

我使用以下解决方案（没有固定的对话框宽度），让它保持水平居中。

#test {
  position: absolute;
  max-width: 300px;
  left: 1%;
  right: 1%;
}

感谢任何反馈/劣势！

使用twitter bootstrap中心内容

3 个答案:

CSS

HTML

实例