twitter-bootstrap 如何使用响应式布局在屏幕中央制作一个浮动框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18558989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a floating box in the center of the screen with responsive layout?
提问by staticdev
I am trying to get into responsive design/layout with Bootstrap and CSS, but I am kind of confused of how could a change a box to be in the center of the screen.
我正在尝试使用 Bootstrap 和 CSS 进行响应式设计/布局，但我对如何将框更改为位于屏幕中央感到困惑。
I have a login pane that in Google Chrome has size 277x256 (that size could fit many smartphone screens). So I made a CSS like that:
我有一个在 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;
}
You can see the complete code in: http://jsfiddle.net/H5Qrh/1/
您可以在以下位置看到完整的代码：http: //jsfiddle.net/H5Qrh/1/
=== UPDATE ===
=== 更新 ===
I made a cleaner code and tried using Absolute Centering instead of Negative Margins:
我编写了一个更清晰的代码并尝试使用绝对居中而不是负边距：
.center-pane {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 277px;
height: 320px;
}
My updated Fiddle: http://jsfiddle.net/H5Qrh/3/
我更新的小提琴：http: //jsfiddle.net/H5Qrh/3/
Now the footer is above the box.. that shouldn't occour.
现在页脚位于框上方.. 不应该出现。
回答by Graham Walters
You're using absolutebut I'd change that to fixed(this will work on both).
您正在使用，absolute但我fixed会将其更改为（这对两者都适用）。
I set your height and widths, but you can change them, and because you want it responsive, you can change them with a few media queries. For example mobile you might want width to be 90% or 100%.
我设置了你的高度和宽度，但你可以改变它们，因为你希望它具有响应性，你可以通过一些媒体查询来改变它们。例如移动设备，您可能希望宽度为 90% 或 100%。
.login .pane {
position: fixed; /* could be absolute */
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 300px;
height: 250px;
}
Here's a jsfiddle
这是一个jsfiddle
