css – 如何使用响应式布局在屏幕中央制作浮动框？

我试图通过Bootstrap和CSS进入响应式设计/布局,但我有点担心如何更改框位于屏幕中心.

我有一个登录窗格,在谷歌浏览器中的大小为277×256(该大小适合许多智能手机屏幕).所以我做了一个这样的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/

现在页脚在盒子上方..不应该出现.

你使用的是绝对值,但我将其更改为固定(这将适用于两者).

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

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

这是一个jsfiddle