Centralizando verticalmente com CSS
Overview
Mergulhe conosco na arte de posicionar elementos em uma página web com um toque de magia CSS. Em meio a desafios e pesadelos comuns no design de interfaces, encontramos uma luz no fim do túnel para o temido alinhamento vertical.
2024 update!
Então, já estamos em 2024 e já passou da hora de atualizar este post.
Aqui está um ajuste moderno para centralizar verticalmente um div usando flexbox, que é eficiente e amplamente
suportado. Este método garante que seu conteúdo seja perfeitamente centralizado, tanto vertical quanto horizontalmente,
dentro de seu contêiner. Aplique as seguintes propriedades CSS ao seu contêiner:
display: flex;
align-items: center;
justify-content: center;
Essa abordagem oferece uma solução mais limpa e robusta em comparação com os métodos tradicionais, adaptando-se perfeitamente em diferentes tamanhos de tela e mudanças de conteúdo.
Abaixo está um exeplo desta abordagem em prática:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Demo</title>
<style>
.centered-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: salmon;
}
</style>
</head>
<body>
<div class="centered-container">
<p>Hello, world! I'm perfectly centered.</p>
</div>
</body>
</html>
Neste exemplo, adicionei height ao container para demonstrar o funcionamento. Caso contrário, o container teria a mesma altura do conteúdo.
Espero ter ajudado!
Post original (2017)
Posicionar elementos em uma página utilizando CSS é , em grande parte, o material utilizado para criar pesadelos. Especialmente se a sua tarefa é fazer alinhamento vertical…
Existe uma saída utilizando apenas CSS puro, veja o fonte abaixo:
position: relative;
top: 50%;
transform: translateY(-50%);
Talvez o código acima precise de um pouco de ajuste, mas já é algo bem simples de se fazer.