如何垂直中心在引导容器?

我正在寻找一种方法，垂直中心容器div在大屏幕内，并将其设置在页面的中间。

.jumbotron必须适应屏幕的全部高度和宽度。.container div的宽度为1025px，应该位于页面的中间(垂直居中)。

我希望这一页有超大屏幕适应屏幕的高度和宽度与容器垂直中心的超大屏幕。我怎样才能做到呢?

.jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg top-features-bg"></i></span> <p><strong>Redirect</strong><br>Visitors where they converts more.</p> </li> <li> <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span> <p><strong>Track</strong><br>Views, Clicks and Conversions.</p> </li> <li> <span><i class="fa fa-check simple_bg top-features-bg"></i></span> <p><strong>Check</strong><br>Constantly the status of your links.</p> </li> <li> <span><i class="fa fa-users simple_bg top-features-bg"></i></span> <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p> </li> <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a> <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6> </ul> </div> </div> </div> </div>

当前回答

与引导带4垂直对齐中心

添加这个类:d-flex align-items-center到元素中

例子

如果你有这个:

<div class="col-3">

改成这样:

<div class="col-3 d-flex align-items-center>

2021-02-12 09:13:13

其他回答

add Bootstrap.css then add this to your css html, body{height:100%; margin:0;padding:0} .container-fluid{ height:100%; display:table; width: 100%; padding: 0; } .row-fluid {height: 100%; display:table-cell; vertical-align: middle;} .centering { float:none; margin:0 auto; } Now call in your page <div class="container-fluid"> <div class="row-fluid"> <div class="centering text-center"> Am in the Center Now :-) </div> </div> </div>

2014-12-16 08:26:15

给出容器类

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

给出容器内部的div:

align-content: center;

这个div中的所有内容都将显示在页面的中间。

2020-04-15 10:42:52

更新2021

Bootstrap 5仍然使用flexbox，因此垂直定心的方法与Bootstrap 4相同…

Bootstrap 4使用flexbox，所以垂直居中的方法更容易，不需要额外的CSS。

只需使用d-flex和align-items-center实用程序类。

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://codeply.com/go/ui6ABmMTLv

重点:垂直定心与高度有关。您试图居中的项的父容器必须具有已定义的高度。如果你想要页面的高度，在父级上使用vh-100或min-vh-100 !例如:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

Also see: https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4

2017-03-07 11:17:12

与引导带4垂直对齐中心

添加这个类:d-flex align-items-center到元素中

例子

如果你有这个:

<div class="col-3">

改成这样:

<div class="col-3 d-flex align-items-center>

2021-02-12 09:13:13

如果你使用Bootstrap 4，你只需要添加2个div:

.jumbotron{ height:100%; width:100%; } <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="jumbotron"> <div class="d-table w-100 h-100"> <div class="d-table-cell w-100 h-100 align-middle"> <h5> your stuff... </h5> <div class="container"> <div class="row"> <div class="col-12"> <p> More stuff... </p> </div> </div> </div> </div> </div> </div> </body>

类:d-table, d-table-cell, w-100, h-100和align-middle将完成这项工作

2019-08-26 03:46:40

如何垂直中心在引导容器?

推荐文章

最新文章

标签