1

我正在创建一个登录屏幕，其中有一个登录框，无论用户的分辨率如何，我都希望它出现在屏幕的中心（水平和垂直）。

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

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

4

3 回答 3

5

最好的方法是对旧 IE 版本使用 CSS 和 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 之外的所有浏览器。

于 2013-01-14T07:54:08.520 回答
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;
}
于 2013-01-14T06:19:51.963 回答
0

我正在使用以下解决方案（没有固定宽度的对话框），使其水平居中。

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

任何反馈/缺点表示赞赏！

于 2015-04-27T13:35:54.890 回答