Atualização 2019 - Bootstrap 4.3.1
Não há necessidade de CSS extra . O que já está incluído no Bootstrap funcionará. Verifique se os contêineres do formulário estão com a altura total . O Bootstrap 4 agora tem uma h-100
classe para 100% de altura ...
Centro vertical:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://www.codeply.com/go/raCutAGHre
a altura do contêiner com o (s) item (s) para o centro deve ser de 100%
(ou qualquer que seja a altura desejada seja relativa ao item centralizado)
Nota: Ao usar height:100%
( porcentagem de altura ) em qualquer elemento, o elemento recebe a altura de seu contêiner . Nos navegadores modernos, unidades vh height:100vh;
podem ser usadas em vez de%
obter a altura desejada.
Portanto, você pode definir html, body {height: 100%} ou usar a nova min-vh-100
classe no container em vez de h-100
.
Centro horizontal:
text-center
para centralizar display:inline
elementos e conteúdo da coluna
mx-auto
para centralizar dentro de elementos flexíveis
offset-*
ou mx-auto
pode ser usado para centralizar colunas ( .col-
)
justify-content-center
para centralizar colunas ( col-*
) dentrorow
Centro de alinhamento vertical no Bootstrap 4
Formulário centralizado em tela cheia do
Bootstrap 4 Grupo de entrada central do Bootstrap 4 Grupo
Bootstrap 4 horizontal + vertical em tela cheia do centro
<section>
tag ou deve-se manter<div>
s para centralizar o conteúdo horizontal e verticalmente na janela de exibição? Já tenho um site com páginas com seções que mudam de cor e / ou imagens de plano de fundo.