Css 引导中的垂直对齐中心 我试图用Bootstrap 4把我的容器放在页面中间。到目前为止，我一直没有成功。任何帮助都将不胜感激

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

var currentAuthor=”“；
var currentQuote=“”；
函数randomQuote（）{
$.ajax({
url:“https://api.forismatic.com/api/1.0/?",
数据类型：“jsonp”，
数据：“method=getQuote&format=jsonp&lang=en&jsonp=？”，
成功：功能（响应）{
$（“#quote content”）.html（“”+response.quoteText+“”）；
$（“#quote author”）.html（“
”+response.quoteAuthor+”
”）；
currentAuthor=response.quoteAuthor；
currentQuote=response.quoteText
}
});
}
函数openURL（url）{
打开（url，'Share'，'width=550，height=400，toolbar=0，scrollbars=1，location=0，statusbar=0，menubar=0，resizeable=0'）；
}
函数tweetQuote（）{
openURL（'https://twitter.com/intent/tweet?hashtags=quotes，freecodecamp&related=freecodecamp&text='+encodeURIComponent（'''''''+currentQuote+'''-'+currentAuthor））；
}
$（文档）.ready（函数（）{
随机引用（）；
$（“#获取另一个报价按钮”）。单击（函数（）{
随机引用（）；
});
$（'#tweet'）。在（'单击'，函数（）上）{
tweetQuote（）；
});
});
html，正文{
背景图像：url（“https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
背景色：#17234E；
页边距底部：0；
最小高度：30%；
背景重复：无重复；
背景位置：中心；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
.btn新报价{
颜色：#0c0d；
背景色：透明；
边框颜色：#414147；
}
.btn新报价：悬停{
颜色：#0c0d；
背景色：#9A989E；
边框颜色：#0cd；
}
#推特{
颜色：RGB（100100100）；
}
#推特：悬停{
颜色：RGB（50,50,50）；
}
琼伯伦先生{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
不透明度：.85；
边框颜色：RGB（50,50,50）；
垫底：8px；
}



不要引用我的话。。。
通过使父容器灵活并添加
对齐项目：居中，您可以垂直对齐容器：

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

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

如果尝试居中的元素的父元素没有定义
高度，所有垂直定心解决方案均无效

现在，垂直定心

Bootstrap 5测试版（2021年更新）

引导程序5仍然基于flexbox，因此垂直居中的工作方式与引导程序4相同。例如，可以在flexbox父级（
行
或
d-flex
）上使用“对齐项目中心”和“对齐资源中心”

引导4

您可以使用新设置使
容器
达到全高并显示
flex
。这些选项不需要额外的CSS（除了容器的高度（即html、正文）必须为100%）

选项1
在flexbox子系统上对齐自中心

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



选项3
在flexbox父项上对齐资源中心
（
.card
是
显示：柔性；柔性方向：列
）


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>




3-使用显示工具垂直居中：

引导程序4具有可用于
显示：表格
，
显示：表格单元格
，
显示：内联
等的功能。。这些可用于对齐内联、内联块或表格单元格元素

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

或者在父级/容器上使用引导4.1+中的
min-height:100vh
（
min-vh-100
）。如果要将子元素居中放置在父元素中。父级必须具有定义的高度

另请参见：



在Bootstrap 4（beta版）中，使用
中对齐
。参考：

使用垂直对齐方式更改元素的对齐方式
公用事业。请注意，垂直对齐仅影响内联，
内联块、内联表格和表格单元格元素

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

从
.align baseline
，
.align top
，
。align middle
，
。align bottom
，
.align text bottom
和
.align text top
根据需要

下面的bootstrap 4类帮助我解决了这个问题

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


在Bootstrap 4.1.3中：

当我试图将引导标记放在
container>row>column
的
h1
标题旁边时，这对我来说很有效

工作原理是一些简单的css：

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

或

我的徽章
因为以上这些都不适合我，所以我添加了另一个答案

目标：使用bootstrap4flexbox类垂直和水平对齐页面上的div

步骤1：将最外层的div设置为高度
100vh
。这会将高度设置为纹理端口高度的100%。如果你不这样做，其他的都不行。设置为
       <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>

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

body,html {
  height: 100%;
}

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

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

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

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

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

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

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

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


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

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

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

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