我正在寻找一种方法,垂直中心容器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>


当前回答

如果你使用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将完成这项工作

其他回答

给出容器类

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

给出容器内部的div:

align-content: center;

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

为bootstrap4垂直中心的少数项目

D-flex用于伸缩规则

用于项目垂直方向的弯曲列

justification -content-center用于定心

Style ='height: 300px;'必须为设定点,其中中心为calc或使用h-100类

然后是水平中心div d-flex justify-content-center 还有一些容器

所以我们有3个标签的层次结构:div-column -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

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

在IE, Firefox和Chrome中测试。

.parent-container { 位置:相对; 高度:100%; 宽度:100%; } .child-container { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%,-50%); } < div class = "父容器”> < div class = "子容器”> < h2 > < / h2 >标题文本 < / span > < span >一些文本 < / div > < / div >

网址:https://css-tricks.com/centering-css-complete-guide/

如果你使用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将完成这项工作