3

我正在尝试使用 Bootstrap 和 CSS 进行响应式设计/布局，但我有点困惑如何将一个框更改为位于屏幕的中心。

我有一个登录窗格，在 Google Chrome 中的大小为 277x256（该大小可以适合许多智能手机屏幕）。所以我做了一个这样的CSS：

.login .pane {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -128px -138.5px; /* half of the size in Google Chrome */
    background: #f0f0fd;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
}

您可以在以下位置查看完整代码：http: //jsfiddle.net/H5Qrh/1/

=== 更新 ===

我编写了更简洁的代码并尝试使用绝对居中而不是负边距：

.center-pane {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 277px;
    height: 320px;
}

我更新的小提琴：http: //jsfiddle.net/H5Qrh/3/

现在页脚在框上方..这不应该发生。

4

1 回答 1

8

您正在使用absolute，但我fixed会将其更改为（这对两者都有效）。

我设置了您的高度和宽度，但您可以更改它们，并且因为您希望它具有响应性，您可以通过一些媒体查询来更改它们。例如移动设备，您可能希望宽度为 90% 或 100%。

.login .pane {
  position: fixed; /* could be absolute */
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  width: 300px;
  height: 250px;
}

这是一个jsfiddle

于 2013-09-01T14:09:35.927 回答