6 CSS Tricks para alinhar o conteúdo verticalmente
Vamos falar sobre o alinhamento vertical no CSS, ou para ser mais preciso como isso não é possível. O CSS ainda não forneceu uma maneira oficial de centralizar o conteúdo verticalmente em seu contêiner. É um problema que provavelmente frustrou os desenvolvedores da web em todos os lugares. Mas para não temer, neste post, vamos mostrar alguns truques que podem ajudá-lo imitar o efeito.
Esses truques podem, no entanto, ter limitações, e você pode ter que use mais de um truque para completar a ilusão. Se você souber de algum outro truque, nos informe nos comentários.
1. Use o posicionamento absoluto
O primeiro truque que vamos ver aqui usa o Primeiro, definiremos a posição do elemento do contêiner como relativo e, em seguida, definiremos a posição do elemento filho como Para alinhá-lo verticalmente, mova a posição do elemento filho a partir da parte superior, pela metade da altura do contêiner, e puxe-o para cima pela metade da largura do elemento filho. Aqui está a saída: Este truque é perfeito quando há apenas um único elemento filho, caso contrário, o CSS3 Transform tornou fácil colocar conteúdo no centro. CSS3 Transform, ao contrário do Assumindo que temos a mesma estrutura HTML que o método anterior - um pai, um elemento filho - Tenha em mente que o CSS3 Transforms não funcionará no Internet Explorer 8 e abaixo. Você pode querer usar qualquer um dos outros métodos aqui como um substituto. Nós também podemos usar Este truque é adequado para quando você não definir o recipiente em uma largura fixa, basta definir a largura para Se você tiver apenas uma linha de conteúdo textual em um contêiner, poderá alinhar o texto verticalmente usando o Lembre-se que este truque só funciona com uma única linha de texto. Se o conteúdo for dividido em duas ou mais linhas, o espaço entre cada linha será conforme especificado no Pessoalmente, usando CSS Table é o meu truque favorito para aplicar o alinhamento vertical. Ele funciona em navegadores antigos como o Internet Explorer 8. Esse método é feito configurando a exibição do elemento do contêiner para O último método para centralização vertical é usando o Flexbox. O Flexbox é um novo módulo em CSS3. Ele oferece um método mais direto para alinhar o conteúdo. Para centralizar o conteúdo verticalmente na caixa flexível, basta adicionar Lembre-se de que alguns navegadores do Flexbox suportam apenas recursos parciais do módulo Flexbox, como o Internet Explorer 10, Safari, 6 e Chrome 27 e inferiores. Portanto, semelhante ao truque com o CSS3 Transform, certifique-se de que o efeito caia bem nesses navegadores.posição propriedade. Você tem dois absoluto. Isso nos permite colocá-lo livremente em todo o contêiner. absoluto posição afetará o outro elemento dentro do mesmo contêiner.2. Use o CSS3 Transform
posição propriedade, não afetará a posição de outros elementos dentro do mesmo container.50% de cima e usando a transformação CSS dá uma tradução de -50%. E ai você tem isso.3. Use Padding
preenchimento para criar uma ilusão de alinhamento vertical. Para fazer isso, basta definir o preenchimento superior e inferior igualmente, da seguinte maneira:auto.4. Use Altura da Linha
altura da linha propriedade. Colocou o altura da linha valor para aproximadamente o mesmo que a altura do contêiner, e você verá a seguinte saída.altura da linha, nos dando muito espaço em branco.5. Use a tabela CSS
mesa, enquanto o elemento filho deve ser exibido como célula de mesa então use o alinhar verticalmente propriedade para centralizar texto verticalmente.6. Use o Flexbox
itens de alinhamento: centro; como segue, e é isso.
