我有一个登录窗格,在谷歌浏览器中的大小为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