Bootstrap - 登录框与背景图片垂直对齐

Question

我正在使用以下代码显示带有背景图片的登录框。

body {
  background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.panel-default {
  opacity: 0.9;
  margin-top:30px;
}

.form-group.last { 
  margin-bottom:0px; 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-7">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span class="glyphicon glyphicon-lock"></span> Login</div>
        <div class="panel-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-3 control-label">
                Email</label>
              <div class="col-sm-9">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">
                Password</label>
              <div class="col-sm-9">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-9">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"/>
                    Remember me
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group last">
              <div class="col-sm-offset-3 col-sm-9">
                <button type="submit" class="btn btn-success btn-sm">
                  Sign in</button>
                <button type="reset" class="btn btn-default btn-sm">
                  Reset</button>
              </div>
            </div>
          </form>
        </div>
        <div class="panel-footer">
          Not Registred? <a href="http://www.jquery2dotnet.com">Register here</a></div>
      </div>
    </div>
  </div>
</div>

我可以使用下面的代码水平对齐它

col-md-4 col-md-offset-4

在这里，CSS 中设置的上边距在移动设备上看起来不太好，因为它没有居中对齐。我希望登录框垂直居中，我尝试了各种解决方案，例如使用 display: flex 等，但 none 在这种情况下有效。

你能帮帮我吗？

谢谢。

Answer 1

首先你必须说你的容器应该占主体高度的 100%

可以用

完成

.container{
    height: calc(100vh);
}

之后，您可以将 display:table 保留给父 div，将 display:table-cell 保留给子 div 以及 vertical-align: middle，这将使您垂直对齐中心

检查这个fiddle

我已经更改了您的代码

HTML:

<div class="row login-box">

CSS:

.container{
  height: calc(100vh);
  display: table;
  table-layout: fixed;
  width: 100%;
 }

.login-box{
  display: table-cell;
  width: 100%;
  vertical-align: middle;
 }

Answer 2

您可以使用 CSS Flexbox。您还需要为 body 定义 height: 100vh 并使其成为弹性容器。

Like:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

看看下面的代码片段（使用整页视图）：

body { 
  background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.panel-default {
  opacity: 0.9;
  margin-top:30px;
}

.form-group.last { 
  margin-bottom:0px; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-lock"></span> Login</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">
                            Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">
                            Password</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"/>
                                    Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group last">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-success btn-sm">
                                Sign in</button>
                                 <button type="reset" class="btn btn-default btn-sm">
                                Reset</button>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="panel-footer">
                    Not Registred? <a href="http://www.jquery2dotnet.com">Register here</a></div>
            </div>
        </div>
    </div>
</div>

希望对您有所帮助！

Bootstrap - 登录框与背景图片垂直对齐

Bootstrap - Vertical align Login box with background image

css

vertical-alignment

twitter-bootstrap