Question

我正在尝试使用Bootstrap和CSS进入响应式设计/布局，但我对如何更改框位于屏幕中心感到困惑。

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

中看到完整的代码

=== UPDATE ===

我制作了一个更干净的代码并尝试使用绝对居中而不是负边距：

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

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

现在页脚位于框上方..不应该出现。

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

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

1 个答案: