Se você já fez uma página web na sua vida já deve ter quebrado a cabeça para centralizar um objeto na página, seja tanto na
vertical como na horizontal.
E o drama é maior quando tudo deve ser centralizado e responsivo.
Este 'efeito' é particularmente complexo porque o browser, pode default, alinha tudo da direita para a esquerda
e de cima para baixo.
Cada tag da página é encaixada como um dominó seguindo esse critério, cima para baixo e direita
para a esquerda.
Outro inconveniente muito grande é que tem elementos chamados 'em-linha' ou 'inline' que ocupam somente o espaço para a sua exibição e com isto não tem um 'tamanho' definido antes de ser renderizado pelo browser e como o browser pode centralizar um elemento se ele não sabe quanto esse elemento vai ocupar?
Uma coisa é mostrar como fazer e outra é explicar o motivo daquilo que está sendo feito, especialmente no aprendizado.
Mostrarei passo a passo como a coisa foi feita, detalhadamente.
O exemplo que escolhi foi a página de login. É uma página que praticamente todo site tem e é tipicamente composta por 3 elementos, O login do usuário, a senha do usuário e o botão para prosseguir e entrar no sistema.
Note que o exemplo tem que ser ótimo, bonito, responsivo e tudo que uma boa página deve ter para ser usada.
Quando falamos de centralizar horizontalmente e verticalmente os elementos de uma página estamos falando, normalmente,
em relação a página ( tag body ).
Contudo para 'explicar' o que está sendo feito preciso acrescentar explicações
na página de login o que interfere no conteúdo e simplicidade da página. Isto faz com que eu
não consiga, neste exemplo, centralizar as tags do login porque são diversos exemplos e, didaticamente, não daria para
centralizar tudo e separar qual seria o inicial e o final. Portanto no final da página colocarei um link para a página de
login sem as explicações, simplificada e com o visual perfeito.
Como vamos enviar usuário e senha para um servidor para autenticação precisamos 'encapsular' os dados numa tag form para que no 'submit' do form os dados de login e senha sejam enviados ao servidor de destino.
Quanto a segurança é lógico que a conexão tem que ser uma https porque você estaria passando usuário e senha sem criptografia no processo de autenticação. Mas este detalhe requer outra explicação que foge ao âmbito do item centralizar itens na página.
A centralização vertical e horizontal dos elementos da página de login é feito baseado numa tag container. No caso do login a tag container seria o próprio body, mas neste documento estou anexando instruções o que me obriga a usar outra tag, não a body, para ser o container dos elementos de login. Por isso existe uma tag div abrigando as tags de login, para realizar a centralização vertical dos elementos.
Como não posso alinhar pela tag body, neste exemplo tanto o alinhamento vertical quanto horizontal farei em relação a tag div container dos elementos do login. Isso trará um problema que os elementos do login ficarão alinhados a esquerda da página mas quando for colocada diretamente na tag body esse erro será corrigido.
Esses são os itens básicos e é como o browser exibiria a página, mas com certeza, não ficou legal.
Pois é,essa é a magia da CSS, o que o HTML e browser não fazem você manipula até que fique do jeito que você quer.
Código:
<div>
<div>
<h2>Login</h2>
<form>
<input type="text" placeholder="Login" />
<input type="password" placeholder="Senha" />
<button type="submit">Login</button>
</form>
</div>
</div>
Existe um efeito que eu gostaria de colocar somente no final, mas por ser uma pseudo:css só pode ser definida ou não e
não tem como ser escondida ou desabilitada.
É o efeito hover quando você passa o mouse pelo botão login ele muda de cor.
O estilo é o seguinte:
button:hover {
background-color: #0741ac;
}
Você pode notar que desde já ele está ligado...passe o mouse sobre qualquer botão do documento e verá o efeito hover.
O exemplo acima os elementos do login ficaram 'misturados' com o restante da página. Vamos 'delimitar' a área desses elementos colocando uma cor azul (cornflowerblue) de fundo.
A única mudança que fiz foi colocar uma classe no container:
<div class="estilo1">
e uma cor de fundo nessa classe:
.estilo1{
background-color:cornflowerblue;
}
Você pode observar que os elementos do login estão ocupando, na horizontal, uma linha inteira e, na vertical,
apenas o espaço para exibição dos elementos o que torna container meio 'apertado' para eles.
Vamos colocar uma altura de 25hv ( 25% da largura vertical ) e uma largura de 18hw ( 18% da altura da página)
para o container dos elementos do login para demonstrar os efeitos de centralização vertical e horizontal dos
elementos do login.
height: 25vh;
width:18vw;
Usei hv e hw ao invés de % para que a largura e altura dos elementos fiquem responsivos a largura e altura da tela do browser.
Agora vamos centralizar os elementos do login no container.
Agora tá começando a parecer uma tela de login, mas inda faltam alguns detalhes, floreados, mas visualmente muito importantes.
Praticamente foi só acrescentar o display:flex na css aplicada ao elemento div mais externo.
.estilo4 {
background-color: cornflowerblue;
font-family: Arial, Helvetica, sans-serif;
background-color: #1a1a1a;
margin: 0;
padding: 0;
height: 25vh;
width: 18vw;
display: flex;
justify-content: center;
align-items: center;
}
Outras css importante são:
justify-content;: center; que centraliza os elementos do login horizontalmente.
align-items: center; que centraliza os elementos do login verticalmente.
Observe que tanto justify-content como align-items precisam do estilo display: flex; para funcionar.
O texto login no topo da página ficou meio grudado aos elementos abaixo do login. Melhor colocar uma margem-bottom para distanciar eles. Pensando melhor, vou adicionar text-align: center; para centrarlizar ele no box de login.
Para provocar o efeito acima acrescentei um estilo a tag h2:
.estiloh2 {
text-align: center;
margin-bottom: 20px;
}
Agora vamos estilizar os elementos dentro do form de login. A pricipal mudança é o estilo flex-direction: column; o que faz com que cada elemento do form seja exibido na vertical e com o mesmo tamanho. O botão de login que antes era no estilo 'inline' ou 'em-linha' passou a ser 'box' (pela classe flex) e ai seu tamanho foi ajustado para o default do box, ocupa a linha inteira.
Para provocar o efeito acima coloquei um estilo no form:estiloform
.estiloform {
display: flex;
flex-direction: column;
}
Agora vamos estilizar as caixas de entrada de dados. Elas estão muito agrupadas e o formato padrão do browser é realmente ruim.
Acrescentei os estilos:
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
border: 1px solid black;
background-color: #d8d8d8;
O margin-bottom faz um botão ficar separado um do outro 15px na vertical. Um padding 10px faz com que ele fique distante dos demais elementos do box em 10px. O border-radius faz o box da tag input ficar com os cantos arredondados. Coloquei um border 1px solid black para destacar o limite da tag input. Finalmente coloquei um tom de cor de fundo que fica bom especialmente em celulares.
Tá quase bom mas nosso botão está zuado, feio demais. vou aplicar os estilos:
background-color: royalblue;
color: #fff;
padding: 10px;
border-radius: 8px;
Vamos agora aplicar um estilo border-radius: 8px; a div externa para que o box fique mais bonito.
Acredito que ficou bom.
Caso queira a página de login sem explicações ela está em
Centralização Sem Explicações.html
Na página sem explicações experimente mudar a largura da tela, a altura da tela e verá que o login ficará sempre
centralizado na tela, quando for possível.
Outro efeito interessante que poderia ser acrescentado é a redução automática do tamanho dos elementos da página de login no caso de uma tela muito pequena. Isso seria feito aplicando media queries e ai sim a página seria realmente 'responsiva'. Isso aumenta um pouco a complexidade da página porque você vai ter que definir um 'tamanho de letra' para cada tamanho de página, por exemplo. Caso queira dar uma olhada visite esta página