我正在寻找一种方法，垂直中心容器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>
为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
我喜欢的技巧是:
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Demo
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<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将完成这项工作
