Bootstrap 4中的垂直对齐中心

我正在尝试使用Bootstrap 4将Container放在页面的中心。到目前为止，我一直没有成功。任何帮助将不胜感激。

我在Codepen.io上构建了它，以便你们可以使用它，并让我知道什么是我的想法。 br />

 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>

#1 楼

重要！垂直居中相对于父对象的高度

如果您要居中的元素的父对象没有定义的高度，则任何垂直居中解决方案都将无效！ />
现在，进入Bootstrap 4的垂直居中...
您可以使用新的flexbox和size实用程序将container设置为全高，将display: flex设置为全高。这些选项不需要额外的CSS（容器的高度（即：html，body）必须为100％）。
flexbox child上的选项1 align-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
弹性盒父代上的选项2 align-items-center（.row是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
Flexbox父级上的选项3 justify-content-center（.card是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

有关Bootstrap 4垂直居中的更多信息
/>现在，Bootstrap 4提供了Flexbox和其他实用程序，因此有许多方法可以实现垂直对齐。 http://www.codeply.com/go/WG15ZWC4lf
1-使用自动页边距垂直居中：
另一种垂直居中的方法是使用my-auto。这将使元素在容器内居中。例如，h-100使行全高，并且my-auto将使col-sm-12列垂直居中。

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

使用自动边距演示功能垂直居中
my-auto表示垂直y轴上的边距，并且等效到：

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

2-带Flexbox的垂直中心：

由于Bootstrap 4 .row现在是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>

，或在整个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>

垂直居中不同高度的列演示
请参阅此Q / A以居中，但保持相等的高度

3-使用显示实用程序的垂直居中：
Bootstrap 4具有可用于display:table，display:table-cell，display:inline等的显示工具。这些工具可与垂直对齐工具一起使用，以对齐内联，内联块或表格单元格元素。

<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>

使用Display Utils演示进行居中演示
更多示例<div>中的垂直中心图像.container中的垂直中心.qcontainer中的垂直中心和<div>中的垂直中心和底部parent中的垂直中心子项垂直中心全屏jumbotron

重要！我提到过高度吗？
记住垂直居中是相对于父元素的高度。如果要在整个页面上居中，在大多数情况下，这应该是CSS ...
或在父/容器上使用min-height: 100vh（在Bootstrap 4.1+中为min-vh-100）。如果要将子元素居中放置在父元素内部。父级必须具有定义的高度。
另请参见：引导程序4中的垂直对齐引导程序4中心垂直和水平对齐

当在具有导航栏的页面上使用以上内容时，我将获得一个滚动条。我认为它在导航栏下方增加了100％的高度，并使其居中。我该如何解决？

–新维度
17年12月10日在6:50

我正在尝试将多行对齐到以flex框为中心。我想将所有按钮对齐在中间。 codeply.com/go/5abdqC33cU

–编码器
19年3月15日在17:09

我准备了一个Codepen，目前基于此处显示的方式展示了3种居中方式：codepen.io/yigith/pen/oNjmGEL

–KodFun
5月21日19:56

选项1仅在

更改为

时对我有用

–Still_learning
11月6日11:57

这是正确的，因为h-100是其父容器的100％，而vh-100是视口的高度。在提出问题时，Bootstrap中不存在vh-100。

–吉姆
11月6日12:03

#2 楼

引导程序的以下4个课程帮助我解决了这个问题

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

但这并没有使我的div垂直居中。

–黎明
18年7月30日在0:21

您能详细说明一下CSS代码吗？分享一下，我将调查您面临的问题。

– Manoj
18年8月14日在11:41

#3 楼

您可以通过弯曲父容器并添加align-items:center来垂直对齐容器：

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

更新笔

哦，大声笑，我错过了描述中的链接...您还添加了html正文{height：100％} ...添加了使其生效！谢谢！

–迦南西顿
17年2月15日在15:00

您的答案不能以要求的方式解决问题（使用引导程序）

– Alex Nikonov
19年6月13日在12:42

我完全不同意您的意见，尽管存在有关如何使用Bootstrap类的问题，但您还是建议解决方法。

– AlexNikonov
19年6月14日在9:58

@AlexNikonov不，在OP问题中没有什么地方表明他们仅限于使用引导程序-这是其他可能登陆此页面以垂直对齐事物而不使用引导程序类的其他人的替代方法。随便走吧-这里还有许多其他答案供您使用。我不明白您为什么为此挂单-这是一个对所有想法都有帮助的论坛-不仅仅是头脑单一的答案。是像您这样的用户通过降低答案来破坏本站点，从而提供了解决问题的方法，但仅仅是因为您不喜欢它

– Pete
19年6月14日在10:32

或使用BS4：

一些文本

–MingalevME
19年10月2日，11：55

#4 楼

因为上述方法都不适合我，所以我要添加另一个答案。

目标：使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。

步骤1：将最外面的div设置为100vh的高度。这会将高度设置为Veiwport高度的100％。如果您不这样做，则别无选择。将其设置为100%的高度仅相对于父级，因此，如果父级不是视口的整个高度，则将无法进行任何操作。在下面的示例中，我将Body设置为100vh。

步骤2：将容器div设置为具有d-flex类的flexbox容器。

步骤3：居中div

步骤4：使用justify-content-center将div垂直居中

步骤5：运行页面，查看垂直和水平居中的div。

请注意，居中div本身（子div）不需要设置特殊类。

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

@AjayKumar，您要分享您的修改吗？

– Greg Gum
19年3月9日在19:15

谢谢，尤其是100vh技巧对我有很大帮助。 Bootstrap还为此提供了vh-100类。

–斯文
19年8月13日在22:21

#5 楼

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

#6 楼

我是用Bootstrap 4.3.1这样的：

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

#7 楼

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

这行是发生魔术的地方<div class="col-md-6 my-auto">，my-auto将使列内容居中。这适用于上面的代码示例，在这种情况下，您可能具有可变大小的图像，并且需要使该列中的文本与它的右对齐。

#8 楼

我已经尝试过所有答案，但发现这里是h-100和vh-100之间的区别
这是我的解决方案：

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

#9 楼

在Bootstrap 4（测试版）中，使用align-middle。请参阅有关垂直对齐的Bootstrap 4文档：

使用垂直对齐
实用程序更改元素的对齐。请注意，垂直对齐仅影响内联，
内联块，内联表和表格单元格元素。

从.align-baseline，.align-top，.align-middle，.align-bottom，
.align-text-bottom中选择，并根据需要添加.align-text-top。

#10 楼

<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>

你的照片让我觉得stackoverflow开始了advs：D

– AlexNikonov
19年6月13日在12:40

#11 楼

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

@AjayKumar向卡添加flex-grow-1类可防止其缩小。

–弗雷德
19 Mar 27 '19 at 20:41

#12 楼

垂直对齐使用此引导程序有4个类：

父级：d-table
AND
子级：d-table-cell和align-middle＆text-center

例如：

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

，如果想让父母成为圈子：

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

这两个自定义css类如下：

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最后用法例如：

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

align-middle是我一直在寻找的，非常简单正确，谢谢！

– Budianto IP
10月9日4:07

#13 楼

在div上使用.my-auto（引导程序4）css类

#14 楼

将您的内容放入高度为100％（即h-100）的flexbox容器中。然后使用justify-content-center类集中证明内容。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

#15 楼

在Bootstrap 4.1.3中：

当我尝试将引导程序徽章放在container > row > column标题旁边的h1内时，这对我有用。

起作用的是一些简单的CSS：

.my-valign-center {
  vertical-align: 50%;
}

或

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

有没有办法检查文件是否正在使用？

如何改组数组？ [重复]

编程黑洞网