在引导4中垂直对齐中心 - Code

我试图用Bootstrap 4在页面中间居中我的容器。到目前为止我还没有成功。任何帮助都将不胜感激。

我在Codepen建立了它。io，所以你们可以玩它，让我知道什么工作，因为我的想法……

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>

当前回答

在Bootstrap 4 (beta)中，使用align-middle。参考Bootstrap 4关于垂直对齐的文档:

使用vertical-alignment改变元素的对齐方式实用工具。请注意，垂直对齐只影响内联，内联块、内联表和表单元格元素。选择。align-baseline， .align-top， .align-middle， .align-bottom， .align-text-bottom和.align-text-top。

2017-10-15 13:30:27

其他回答

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

2017-02-15 14:47:40

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

2019-02-06 10:27:48

你可以通过使父容器伸缩并添加align-items来垂直对齐你的容器:

body {
  display:flex;
  align-items:center;
}

更新的钢笔

2017-02-15 14:47:28

我已经试过了所有的答案，但发现这里是h-100和vh-100的区别以下是我的解决方案:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

2019-06-13 12:47:21

在你的div上使用.my-auto (bootstrap4) CSS类

2019-10-02 09:38:22

aliyun