Bootstrap 4的垂直居中形式[重复]答案

【问题标题】：Vertically center form of Bootstrap 4 [duplicate]Bootstrap 4的垂直居中形式[重复]
【发布时间】：2018-02-07 11:00:33
【问题描述】：

我需要进入页面的中心（水平和垂直）内容。我正在使用 Bootstrap 4 测试版，我按照 BS 页面上的指南进行操作，但它不起作用 - https://getbootstrap.com/docs/4.0/layout/grid/

    html, body {
    height: 100%;
    }

    .bg-color {
        width: 100%;
        height: auto;
        min-height: 100% !important;
        background: #4e4376;  
        background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376);  
        background: linear-gradient(to bottom, #2b5876, #4e4376);
        
    }
    body::after {
        content: "";
        background-image: url("assets/group.jpg");
        opacity: 0.1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;  
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
    }

    <div class="container-fluid">
        <div class="row justify-content-center align-self-center">
            <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100">
                <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
              </form>
          </div>
      </div>
  </div>

你能帮我解决它吗？谢谢

为了更好地解释我需要什么：

【问题讨论】：

这是一个入门小提琴：jsfiddle.net/je3La8n8
@isherwood 我不需要启动模板...垂直中心不起作用，像框架一样引导，检查更新的问题。
这是一个可能有帮助的 codepen...codepen.io/cowanjt/pen/PKxEmX 它实现了与您的问题类似的问题引用的一些代码。
@cwanjt 谢谢，你应该把它写成答案，把它标记为解决方案
@DenisStephanov，首发不适合你。这是给你的潜在志愿者的。你没有提供演示，所以我提供了。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您必须在项目中包含引导程序。请注意 html 的第一行。

html, body {
    height: 100%;
    }

    .bg-color {
        width: 100%;
        height: auto;
        min-height: 100% !important;
        background: #4e4376;  
        background: -webkit-linear-gradient(to bottom, #2b5876, #4e4376);  
        background: linear-gradient(to bottom, #2b5876, #4e4376);
        
    }
    body::after {
        content: "";
        background-image: url("assets/group.jpg");
        opacity: 0.1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;  
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
        <div class="row justify-content-center align-self-center">
            <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 h-100">
                <form action="">
                <div class="form-group">
                    <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="User email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="password">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
              </form>
          </div>
      </div>
  </div>

【讨论】：

我有它...我只质疑正文的 html 和 css 代码，类似框架的引导程序正在工作，只有 vert.中心也不。检查图片我现在添加的内容。
尝试添加top: 50%
顶部：50% 是一个非常临时的解决方案，不适合响应式网站