3 maneiras fáceis de centralizar um elemento com CSS
Links rápidos
⭐ Um arquivo HTML simples para praticar a centralização
⭐ Usando Flexbox para centralizar um elemento Div
⭐ Usando CSS Grid para centralizar um elemento Div
⭐ Usando CSS Positioning para centralizar um elemento Div
Principais lições
Centralizar elementos em designs da Web já foi uma tarefa formidável, mas o CSS contemporâneo facilita o alinhamento sem esforço ao centro.
O Flexbox surgiu como a técnica predominante para alinhar o conteúdo de forma centralizada, oferecendo um sistema de grelha versátil e adaptável que facilita a disposição perfeita dos elementos.
A centralização de elementos num Web site pode ser conseguida através da utilização da grelha CSS e de técnicas de posicionamento, proporcionando uma grande precisão no controlo da disposição e do alinhamento do conteúdo.
A centralização de um elemento num layout da Web há muito que é um problema para os designers, pois nem sempre é uma tarefa fácil de realizar. No entanto, muitos designs necessitam que os elementos estejam situados no centro e, felizmente, o CSS contemporâneo oferece um suporte robusto para este fim.
Compreender o processo de centrar uma div na horizontal e na vertical utilizando flexbox, grelha CSS, bem como técnicas tradicionais de posicionamento CSS.
Um ficheiro HTML simples para praticar a centralização
As amostras de código fornecidas ilustram a implementação do alinhamento horizontal através da utilização de uma estrutura HTML básica, enquanto manipulam as propriedades CSS para obter vários efeitos. A experimentação com diferentes folhas de estilo oferecerá uma visão do comportamento desses atributos.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Usando o Flexbox para centralizar um elemento Div
O Flexbox emprega uma estratégia direta que o tornou a escolha preferida devido à sua adaptabilidade. O modelo de disposição facilita o alinhamento e a distribuição do espaço, tornando-o uma solução óptima para centralizar componentes num contentor.
Centralize o conteúdo utilizando o flexbox aplicando as seguintes regras CSS:
⭐ Envolva o seu elemento div dentro de um contentor. Aplique a propriedade display: flex ao contentor para ativar a disposição Flexbox. Num caso de teste simples, o corpo pode servir de contentor:
body {
display: flex;
}
⭐ Utilize as propriedades justify-content e align-items para alinhar os itens ao longo do eixo principal (horizontal) e do eixo transversal (vertical), respetivamente. Para centrar ambos os eixos, defina estas propriedades como center . Para uma demonstração simples, deve também definir a altura do corpo para 100vh, para que possa ver o efeito do alinhamento vertical.
body {
justify-content: center;
align-items: center;
}
⭐ Dê à div uma cor de fundo para visualizar a sua colocação na página final:
div { background-color: red; }
a orientação de cima para baixo e da esquerda para a direita.
Utilizar a grelha CSS para centrar um elemento Div
Centrar um elemento utilizando a grelha CSS proporciona um elevado grau de precisão no controlo da disposição e do alinhamento, permitindo uma maior flexibilidade na conceção de páginas Web com estruturas complexas.
⭐ Defina um contentor para o seu layout e aplique o estilo display: grid para ativar a CSS Grid. Neste caso, o corpo serve como contentor.
body {
display: grid;
}
⭐ Utilize as propriedades grid-template-columns e grid-template-rows para definir a estrutura da sua grelha. Para centralizar, uma única coluna e linha será suficiente, então use 1fr para ambas.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ Use a propriedade place-items para centralizar o conteúdo da grade, tanto horizontal quanto verticalmente.
body {
place-items: center;
}
⭐ Estilize o fundo do seu elemento div para visualizá-lo no centro do contêiner da grade.
div {
background-color: blue;
}
Neste caso, um único atributo governa o posicionamento primordial do elemento Div na sua página web:
Utilizar o posicionamento CSS para centrar um elemento Div
Centrar um elemento Div utilizando a propriedade CSS position requer uma compreensão do funcionamento das transformações e transições CSS. Esta compreensão permite o alinhamento correto do elemento no seu contentor principal. Um procedimento detalhado é fornecido abaixo, juntamente com um exemplo ilustrativo.
⭐ Para posicionar o elemento div, certifique-se de que o seu contentor tem uma posição relativa. Isto estabelece um contexto de posicionamento relativo, para que possa colocar a div no centro do seu contentor.
body {
position: relative;
}
⭐ Aplique o posicionamento absoluto ao elemento div e, em seguida, use as propriedades top e left para posicionar o canto superior esquerdo da div exatamente no centro de seu contêiner.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
A transformação translate(-50%, -50%) move a div para a esquerda e para cima em metade da sua largura e metade da sua altura.
Esta abordagem funciona alinhando inicialmente o canto superior esquerdo do elemento com o centro do ecrã, seguido de um deslocamento horizontal e vertical de metade da sua largura e metade da sua altura, respetivamente.
Flexbox, CSS Grid e CSS positioning são técnicas muito eficazes para centrar o conteúdo de um sítio Web. Utilizando o Flexbox, é possível obter facilmente a centralização horizontal e vertical com um mínimo de codificação.O CSS Grid oferece recursos robustos de alinhamento em duas dimensões, enquanto o emprego do posicionamento CSS permite centralizar um elemento em relação ao elemento pai que o contém.
Ao empregar estas metodologias, é possível garantir uma aparência refinada e polida para o seu sítio Web.