Question

我有一个引导程序登录表单出现在顶部居中的页面，但我需要它出现在页面的中心。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3 well offset4">
      <div class="">
        <div class="text-warning">
          <h3>Login to our site</h3>
          <p>Enter your username and password to log in</p>
        </div>
      </div>
      <div class="">
        <form role="form" action="" method="post" class="">
          <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
          </div>
          <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
          </div>
          <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button>
        </form>
      </div>
    </div>
  </div>
</div>

如何使用bootstrap / angularjs将此表单置于页面中？

Answer 1

默认情况下，bootstrap没有垂直居中的工具。

对于登录页面，您只需添加此绝对居中：

  .perfect-centering {
     position: absolute;
     top: 50%;
     left:50%;
     transform: translate(-50%,-50%);
   }

也许它会作为mixin包含在Bootstrap 4中......但是现在，你必须使用其他样式，我想。

Answer 2

我在你的容器外面添加了一个div：

<div class="center">    
<div class="container">
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3 well offset4">
                        <div class="">
                            <div class="text-warning">
                                <h3>Login to our site</h3>
                                <p>Enter your username and password to log in</p>
                            </div>
                        </div>
                        <div class="">
                            <form role="form" action="" method="post" class="">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
</div>

也是一个新的css类，定义为：

.center{
  position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  }

更新：如果你在本地你的bootstrap文件只是添加这个类而不创建其他文件，如果你链接到bootstrap tou可以添加一个风格的div，如：

<div style=" position:absolute;
  top:50%;
  left:50%;
  padding:10px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);">....</div>

中心课的瞬间

Answer 3

这是一个没有使用视图高度进行绝对定位的解决方案。它可能会保留表单的响应宽度。

CSS

/* body {height:100vh;} */ /* if needed */
.full-height {height:100vh;background-color:yellow;}/* 100% of the view-height */
.form-height {margin-top:-130px;}/* minus half the form-height */
.form-v-middle {margin-top:50vh;}/* half the view-height */

HTML

<div class="container full-height">
  <div class="row form-height">
    <div class="col-sm-6 col-sm-offset-3 well offset4 form-v-middle">
      <div class="">
        <div class="text-warning">
          <h3>Login to our site</h3>
          <p>Enter your username and password to log in</p>
        </div>
      </div>
      <div class="">
        <form role="form" action="" method="post" class="">
          <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
          </div>
          <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input type="password" name="form-password" placeholder="Password..." class="form-control" id="form-password">
          </div>
          <button type="submit" class="btn btn-warning col-sm-12"><strong>Sign in!</strong></button>
        </form>
      </div>
    </div>
  </div>
</div>

实施例： http://www.bootply.com/2wtIZimo3W

vh浏览器支持： http://caniuse.com/#search=vh

使用bootstrap将表单放在页面的中心

3 个答案: