使用引导程序将表单放在页面中心答案

【问题标题】：Place form at center of page using bootstrap使用引导程序将表单放在页面中心
【发布时间】：2016-12-21 18:07:13
【问题描述】：

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

<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 将此表单居中到页面？

【问题讨论】：

您是否尝试过应用一些 CSS 属性？
我不想使用任何 css 。我必须只使用引导程序或角度
这不是 bootstrap 内置的东西。你必须自己用一些 CSS 来做。
@ShashankG 我认为 Poldria 是对的，你不能只使用 Bootstrap，即 css 来修复它，这是不可能的
哦好吧..谢谢你们@Poldira@Teshtek

标签： css angularjs twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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%);
  }

更新：如果你在本地有你的引导文件，只需添加这个类而不创建其他文件，如果你链接到引导你可以添加一个带有样式的 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>

中心课程的瞬间

【讨论】：

【解决方案3】：

这是一个没有使用 view-height 绝对定位的解决方案。它可能会保留表单的响应宽度。

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

【讨论】：