html - Bootstrap：将英雄单位水平和垂直居中

Question

我有一个包含 Django 表单的英雄单元。如何在页面上水平和垂直居中？

编辑：

  <div class="row-fluid">
        <div class="span8 hero-unit">

            {{ form }}

        </div>
    </div>

这几乎就是表格的样子。

Answer 1

JSFiddle 与表单

编辑：只是想为需要帮助的人改进这个答案。

好吧，这就是你如何实现一个以中间为中心的形式的英雄单元的方法。

首先是CSS：

.hero-unit {
padding:50px 50px 50px 50px;
    }
.form-horizontal .control-label {
    width: 61px;
    }
.form-horizontal .controls {
margin-left: 80px;
    }
/* Landscape phones and down */
  @media (max-width: 480px) { 

 .hero-unit{
margin-left:-20px;
margin-right:-20px;
  }
 .form-horizontal .controls {
margin-left: 0;
  }
   }

Html 部分：

<div class="container">
<div class="hero-unit">
    <div class="row-fluid">
        <div class="offset4 span4">
            <legend>Sign in to WebApp</legend>
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox">Remember me</label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
     </div>
   </div>
 </div>