如何使用响应式布局在屏幕中央创建一个浮动框？

Question

我正在尝试使用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;
}

我的更新版Fiddle: http://jsfiddle.net/H5Qrh/3/

现在页脚在盒子上面.. 这不应该发生。

- staticdev

---

绝对居中（原文链接：http://codepen.io/shshaw/full/gEiDt） - Itay

我更新了它.. 它变得更接近了。 - staticdev

我认为这是在没有JS的情况下你能做到的最好的。 - Itay

Answer 1

你正在使用 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示例。

- Graham Walters