Question

我有以下引导程序example http://jsbin.com/EKEHeCIX/3/edit。正如您在上面的代码中看到的，我的表单位于内容的顶部。但我需要把它放在中间。

是否可以在没有明显设置顶部像素的情况下进行此操作？因为需要让它适用于任何屏幕（不是平板电脑或手机）

Answer 1

您可以在不设置顶部像素的情况下执行此操作。

使用此：

width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

如果位置为绝对位置，则可以对任何屏幕大小进行响应。

你可能想看看这个： Absolute Centering

这可以帮助您解决很多中心/样式问题！

Answer 2

如果您知道元素的确切宽度和高度，您可以执行以下操作：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -220px;
}

将margin-top设置为元素高度的50％，将margin-left设置为元素width的50％。
显然，您必须在元素中添加class="centered" 以下是您的示例：http://jsbin.com/EKEHeCIX/6

如果你不知道元素的大小或者它有 mutable 大小，你可以（使用jQuery）用javascript实现css代码：

$(function() {
  var $obj = $('.centered');
  $obj.css({
    marginTop:  -($obj.outerHeight() / 2),
    marginLeft: -($obj.outerWidth() / 2)
  });
});

使用javascript进行演示：http://jsbin.com/EKEHeCIX/7

Answer 3

你可以使用这个技巧：

.form-signin {
    width: 400px;
    height: 230px;
    position: absolute;
    /* top:50px for header size */
    /* bottom:60px for footer size */
    top: 50px; bottom: 60px; left: 0; right: 0;
    margin: auto;
}

<强> JSBin updated

如何将我的表单放在内容的中间

3 个答案: