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:
1display: flex;
2align-items: center;
3justify-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:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Flexbox Centering Demo</title>
7 <style>
8 .centered-container {
9 display: flex;
10 align-items: center;
11 justify-content: center;
12 height: 100vh;
13 background-color: salmon;
14 }
15 </style>
16</head>
17<body>
18 <div class="centered-container">
19 <p>Hello, world! I'm perfectly centered.</p>
20 </div>
21</body>
22</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:
1position: relative;
2top: 50%;
3transform: translateY(-50%);
Talvez o código acima precise de um pouco de ajuste, mas já é algo bem simples de se fazer.