Centralizar um elemento usando CSS não é uma questão simples. A mesma configuração de centralização CSS se comporta de maneira diferente em navegadores diferentes. Este artigo apresenta vários métodos comuns em CSS para centralizar elementos horizontalmente.
1. Use margens automáticas para obter centralização
A maneira preferida de centralizar um elemento horizontalmente em CSS é usar o atributo margin - basta definir os atributos margin-left e margin-right do elemento como automático. No uso real, podemos criar uma div que atua como um contêiner para esses elementos que precisam ser centralizados. Uma coisa a observar em particular é que a largura deve ser especificada para o contêiner:
Este método funciona muito bem na maioria dos navegadores convencionais, e até mesmo o IE6 na plataforma Windows pode ser exibido normalmente em seu modo de conformidade padrão. Mas, infelizmente, em versões inferiores do IE, esta configuração não atinge o efeito de centralização. Portanto, se quiser usar este método em projetos reais, você deve garantir que a versão do navegador IE do usuário não seja inferior a 6.0.
Embora o suporte não seja o ideal, a maioria dos designers recomenda usar essa abordagem sempre que possível. Este método também é considerado o mais correto e razoável entre vários métodos para obter a centralização horizontal de elementos usando CSS.
2. Use text-align para obter a centralização.
Outra maneira de obter a centralização dos elementos é usar o atributo text-align. Defina o valor do atributo como centralizado e aplique-o ao elemento body. Essa abordagem é um hack completo, mas é compatível com a maioria dos navegadores, por isso é naturalmente necessária em alguns casos.
A razão pela qual é chamado de hack é que este método não aplica o atributo text ao texto, mas ao elemento que é o contêiner. Isso também cria trabalho extra para nós. Após criar as divs necessárias para o layout, precisamos aplicar o atributo text-align ao corpo conforme o código a seguir:
Haverá algum problema posteriormente? Todos os elementos descendentes do corpo serão exibidos centralizados.
Portanto, precisamos escrever outra regra para retornar o texto ao alinhamento padrão à esquerda:
Você pode imaginar que esta regra adicional causará alguns inconvenientes. Além disso, os navegadores que realmente atendem integralmente aos padrões não alterarão a posição do contêiner, apenas centralizarão o texto dentro dele.
3. Use margens automáticas e alinhamento de texto em combinação
Como o método de alinhamento e centralização de texto tem boa compatibilidade com versões anteriores, e o método de margem automática também é suportado pela maioria dos navegadores contemporâneos, muitos designers usam uma combinação dos dois para criar efeitos de centralização. receba suporte máximo entre navegadores:
Mas isso ainda é um hack e não é perfeito de forma alguma. Ainda precisamos escrever regras adicionais para centralizar o texto no contêiner, mas pelo menos fica bem em todos os navegadores.
4. Solução de margem negativa
A solução de margem negativa é muito mais do que apenas adicionar margens negativas aos elementos. Este método requer o uso de posicionamento absoluto e margens negativas.
A seguir está o método de implementação específico desta solução. Primeiro, crie um contêiner que contenha o elemento centralizado e, em seguida, posicione-o absolutamente a 50% da borda esquerda da página. Dessa forma, a margem esquerda do container começará em 50% da largura da página.
Em seguida, defina o valor da margem esquerda do contêiner como metade negativa da largura do contêiner. Isso irá ancorar o contêiner no ponto médio horizontal da página.
Embora esta não seja a solução preferida, é uma boa abordagem e tem uma ampla gama de aplicabilidade.