<分区>
css - Bootstrap 4 中的垂直居中对齐
我正在尝试使用 Bootstrap 4 将我的容器居中放置在页面中间。到目前为止我一直没有成功。任何帮助将不胜感激。
我在 Codepen.io 构建了它所以你们可以玩它，让我知道什么是可行的，因为我的想法...
var currentAuthor = "";
var currentQuote = "";
function randomQuote() {
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function( response ) {
$("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
$("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
currentAuthor = response.quoteAuthor;
currentQuote = response.quoteText
}
});
}
function openURL(url){
window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function tweetQuote(){
openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}
$(document).ready(function () {
randomQuote();
$("#get-another-quote-button").click(function(){
randomQuote();
});
$('#tweet').on('click', function() {
tweetQuote();
});
});html, body {
background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
background-color: #17234E;
margin-bottom: 0;
min-height: 30%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.btn-new-quote {
color: #0C0C0D;
background-color: transparent;
border-color: #414147;
}
.btn-new-quote:hover {
color: #0C0C0D;
background-color: #9A989E;
border-color: #0C0C0D;
}
#tweet {
color: RGB(100, 100, 100);
}
#tweet:hover {
color: RGB(50, 50, 50);
}
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
opacity: .85;
border-color: RGB(50, 50, 50);
padding-bottom: 8px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="row justify-content-center align-self-center">
<div class="col-sm-6">
<div class="jumbotron vertical-center text-center">
<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
<p id="quote-author" class="lead"><em></em></p>
<hr class="my-2">
<div class="row align-items-center justify-content-between">
<div class="col-sm-1-4 text-left">
<a id="tweet" href="#">
<h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
</a>
</div>
<div class="col-sm-1-4 text-right">
<button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
重要! 垂直中心是相对于父元素的高度
If the parent of the element you're trying to center has no defined height, none of the vertical centering solutions will work!
现在，进入垂直居中......
Bootstrap 5(2021 年更新)
Bootstrap 5 仍然基于 flexbox，因此垂直居中的工作方式与 Bootstrap 4 相同。例如，align-items-center , justify-content-center或 auto margins 可以用在 flexbox parent( row 或 d-flex )上。
- 使用
align-items-center在 flexbox 父行上(row或d-flex) - 使用
justify-content-center在 flexbox 父级列 (d-flex flex-column) - 使用
my-auto在 flexbox 父节点上
Vertical Center in Bootstrap 5
Bootstrap 4
您可以使用新的 flexbox & size utilities制作 container全高和display: flex .这些选项不需要额外的 CSS(除了容器的高度(即:html,body)必须为 100%)。
选项 1 align-self-center在 flexbox child 上
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://codeply.com/go/fFqaDe5Oey
选项 2 align-items-center在 flexbox parent 上(.row 是 display:flex; flex-direction:row)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="jumbotron">
I'm vertically centered
</div>
</div>
</div>
</div>
https://codeply.com/go/BumdFnmLuk
选项 3 justify-content-center在 flexbox parent 上(.card 是 display:flex;flex-direction:column)
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="card h-100 border-primary justify-content-center">
<div>
...card content...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/3gySSEe7nd
更多关于 Bootstrap 4 垂直居中
现在 Bootstrap 4 提供了 flexbox 和 other utilities , 有很多垂直的方法 结盟。 http://www.codeply.com/go/WG15ZWC4lf
1 - 使用自动边距的垂直居中:
另一种垂直居中的方法是使用 my-auto .这将使元素在其容器中居中。例如，h-100使行全高，my-auto将垂直居中 col-sm-12专栏。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
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>
或者，使用 align-items-center整体.row垂直居中对齐所有 col-*在行...
<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>
Vertical Center Different Height Columns Demo
See this Q/A to center, but maintain equal height
3 - 使用 Display Utils 的垂直居中:
Bootstrap 4 有 display utils可用于 display:table , display:table-cell , display:inline等。这些可以与 vertical alignment utils 一起使用对齐内联、内联 block 或表格单元格元素。
<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>
Vertical Center Using Display Utils Demo
更多例子
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron
重要! 我提到高度了吗？
请记住，垂直居中是相对于父级 元素的高度。如果你想让整个页面居中，在大多数情况下，这应该是你的 CSS...
body,html {
height: 100%;
}
或使用 min-height: 100vh (在 Bootstrap 4.1+ 中为 min-vh-100)在父级/容器上。如果你想让一个子元素在父元素中居中。父级必须具有定义的高度。
另见:
Vertical alignment in bootstrap 4
Bootstrap Center Vertical and Horizontal Alignment
关于css - Bootstrap 4 中的垂直居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56505689/