Bootstrap 4 中的垂直居中对齐[重复]

我正在尝试使用 Bootstrap 4 将我的容器置于页面中间。到目前为止我还没有成功。任何帮助，将不胜感激。

我已经把它建在Codepen.io http://codepen.io/cmseaton42/pen/EZMxem所以你们可以玩一下，让我知道什么是有效的，因为我的想法...

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

重要的！ 垂直中心相对于height父母的

如果您尝试居中的元素的父元素没有定义height, none的垂直居中解决方案将会起作用！

现在，垂直居中...

Bootstrap 5（2021 年更新）

Bootstrap 5 仍然flexbox基于所以垂直居中的工作方式与 Bootstrap 4 相同。例如，align-items-center, justify-content-center或可以在弹性盒父级上使用自动边距（row or d-flex).

• use align-items-center在 Flexbox 行父级上（row or d-flex)
• use justify-content-center在 Flexbox 列父级上（d-flex flex-column)
• use my-auto在 Flexbox 父级上

Bootstrap 5 中的垂直居中 https://codeply.com/p/0VM5MJ7Had

引导程序4

您可以使用新的Flexbox 和尺寸实用程序 http://v4-alpha.getbootstrap.com/utilities/flexbox/使container全高和display: flex。这些选项不需要额外的 CSS（除了容器的高度（即：html、body）必须为 100%).

选项1align-self-center在弹性盒孩子上

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey https://codeply.com/go/fFqaDe5Oey

选项2align-items-center在弹性盒父级上 (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/BumdFnmLuk https://codeply.com/go/BumdFnmLuk

选项3justify-content-center在弹性盒父级上 (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd https://codeply.com/go/3gySSEe7nd

有关 Bootstrap 4 垂直居中的更多信息

现在 Bootstrap 4 提供了 flexbox 和其他公用事业 http://v4-alpha.getbootstrap.com/utilities，垂直方向有很多方法 结盟。http://www.codeply.com/go/WG15ZWC4lf http://www.codeply.com/go/WG15ZWC4lf

1 - 使用自动边距的垂直居中：

另一种垂直居中的方法是使用my-auto。这将使元素在其容器内居中。例如，h-100使行全高，并且my-auto将垂直居中col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

使用自动边距垂直居中Demo http://www.codeply.com/go/akn5BYxQwn

my-auto表示垂直 y 轴上的边距，相当于：

margin-top: auto;
margin-bottom: auto;

2 - 带 Flexbox 的垂直居中：

自 Bootstrap 4 起.row is now display:flex你可以简单地使用align-self-center在任何列上将其垂直居中...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center整体上.row垂直居中对齐所有col-*在行...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直中心异高柱Demo http://www.codeply.com/go/GFgGl4YS27

请将此 Q/A 置于中心，但保持相同的高度 https://stackoverflow.com/questions/52913611/align-items-center-while-keeping-the-background-full-height

3 - 使用显示实用程序垂直居中：

Bootstrap 4 有显示工具 https://v4-alpha.getbootstrap.com/utilities/display-property/可以用于display:table, display:table-cell, display:inline等。这些可以与垂直对齐实用程序 https://v4-alpha.getbootstrap.com/utilities/vertical-align/对齐内联、内联块或表格单元格元素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

使用显示实用程序垂直居中Demo http://www.codeply.com/go/30DYTbq83o

更多示例
垂直居中图像<div> https://www.codeply.com/go/Niu8NCcdqj
.container 中的垂直中心 .row https://www.codeply.com/go/7GgwkQhiro
垂直中心和底部<div> https://stackoverflow.com/questions/49278082/bootstrap-4-text-vertical-align-in-the-center-and-the-end-of-div
父级内部垂直居中的子级 https://www.codeply.com/go/6V2zpJSbQO
垂直居中全屏巨幕机 https://www.codeply.com/go/9HWnyQm2Sf

重要的！ 我有提到身高吗？

请记住，垂直居中是相对于父母的身高元素。如果你想在整个页面上居中，在大多数情况下，这应该是你的CSS......

body,html {
  height: 100%;
}

Or use min-height: 100vh (min-vh-100在 Bootstrap 4.1+ 中）在父级/容器上。如果要将子元素置于父元素的中心。父级必须有一个定义的height.

另请参阅：
Bootstrap 4 中的垂直对齐 https://stackoverflow.com/questions/43313090/vertical-alignment-in-bootstrap-4
Bootstrap 中心垂直和水平对齐 https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment