Eu estou tentando centralizar meu Container no meio da página usando o Bootstrap 4. Até agora, não tive sucesso. Qualquer ajuda seria bem-vinda.
Eu construí-o no Codepen.io para que vocês possam brincar com ele e dizer-me o que funciona como se eu estivesse sem ideias...
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>
O centro vertical é relativo à altura dos pais.
Se o pai do elemento que você'está tentando centralizar não tem definido altura, nenhuma das soluções de centralização vertical vai funcionar!
Agora, para a centralização vertical em Bootstrap 4...
Você pode utilizar o novo flexbox & size utilities para fazer o container
de altura total e display: flex
. Estas opções don't requerem CSS extra (exceto que a **altura do container (ie:html,body) deve ser 100%***).
**Opção 1 align-self-center
em flexbox criança***
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
I'm vertically centered
</div>
</div>
https://www.codeply.com/go/fFqaDe5Oey
Opção 2 align-items-center
no 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://www.codeply.com/go/BumdFnmLuk
Opção 3 justify-content-center
em 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://www.codeply.com/go/3gySSEe7nd
**Mais no Bootstrap 4 Vertical Centering***
Agora que o Bootstrap 4 oferece o flexbox e outras utilidades, há muitas abordagens ao alinhamento. http://www.codeply.com/go/WG15ZWC4lf
1 - Centro Vertical Usando Margens Automáticas:
Outra forma de centrar verticalmente é utilizar o my-auto
. Isto centralizará o elemento dentro dele's container. Por exemplo, h-100
faz com que a linha fique a toda altura, e my-auto
centralizará verticalmente a coluna 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>
Centro Vertical Usando Margens Automáticas **Demo***
O my-auto
representa margens no eixo y vertical e é equivalente a:
margin-top: auto;
margin-bottom: auto;
2 - Centro Vertical com Flexbox:
Como Bootstrap 4 .row' é agora
display:flex' você pode simplesmente utilizar `align-self-center' em qualquer coluna para centralizá-la verticalmente...
<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>
ou, utilize align-items-center
em toda a .row
para alinhar verticalmente todos os col-*
na linha...
<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>
Centro Vertical Colunas de Altura Diferente Demo
Veja este Q/A para centralizar, mas mantenha a mesma altura
3 - Centro Vertical Usando Utilitários de Visualização:
Bootstrap 4 tem display utils que pode ser utilizado para display:table
, display:table-cell
, display:inline
, etc.. Estes podem ser utilizados com utils de alinhamento vertical para alinhar elementos inline, inline-block ou célula de tabela.
<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>
Centro Vertical Usando Utilitários de Visualização Demo
**Mais exemplos***
Imagem central vertical em <div>
Centro vertical .row em .container
Centro vertical e fundo vertical em <div>
Centro vertical da criança dentro dos pais
Jumbotron de tela cheia no centro vertical
***Importante! Falei em altura?
Lembre-se que a centralização vertical é relativa à altura do elemento pai. Se você quiser centrar na página inteira, na maioria dos casos, este deve ser o seu CSS...
body,html {
height: 100%;
}
Ou utilize min-height: 100vh
(min-vh-100
em Bootstrap 4.1+) no pai/contentor. Se você quiser centralizar um elemento criança dentro do pai ou da mãe. O pai deve ter uma altura definida de **altura***.
Veja também:
https://stackoverflow.com/questions/43313090/vertical-alignment-in-bootstrap-4
https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment