在引导4中垂直对齐中心

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

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

当前回答

<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

其他回答

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

2017-02-15 14:47:40

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

2019-01-23 12:45:49

我已经试过了所有的答案，但发现这里是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

因为以上这些对我都没用，所以我再加上一个答案。

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

第一步:设置最外层div的高度为100vh。这将高度设置为Veiwport高度的100%。如果你不这么做，其他什么都不管用。将它的高度设置为100%只是相对于父级，所以如果父级不是视口的全高，什么都不会起作用。在下面的例子中，我将Body设置为100vh。

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

步骤3:用justify-content-center类水平居中div。

第四步:用align-items-center将div垂直居中

第五步:运行页面，查看垂直和水平居中的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>

2018-09-30 11:01:04

Bootstrap 5和blazor web组件:

<div class="d-flex align-items-center justify-content-center min" style="height: 50vh">
<button class="btn btn-outline-success mx-2">Register</button>
<button class="btn btn-outline-primary mx-2" style="width:123.44px">Login</button></div>

2022-01-02 07:55:35

在引导4中垂直对齐中心

推荐文章

最新文章

标签