É bastante desafiador centralizar divs em HTML, especialmente na horizontal e na vertical. Mas neste artigo vou te ajudar!

Exemplo de código com explicação:

Digamos que existe uma div com a classe myDiv:

hello dev

Agora vamos,
Centralizar horizontalmente usando CSS:
Para centralizar esta div horizontalmente podemos usar este código CSS:

.myDiv {
  padding: 0 100%;
}

Neste preenchimento de código CSS: 0 100%; define o preenchimento do eixo X para 100% (largura de tela inteira) para centralizar o div horizontalmente.

Centralizar verticalmente usando CSS:
Para centralizar esta div verticalmente podemos usar este código CSS:

.myDiv {
  padding: 100% 0;
}

Neste preenchimento de código CSS: 100% 0; define o preenchimento do eixo Y para 100% (altura da tela inteira) para centralizar o div verticalmente.

Centralizar horizontalmente e verticalmente usando CSS:
Agora vamos centralizá-lo vertical e horizontalmente usando CSS.
Vamos usar este código:

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

Neste código, exiba: flex; define o modo de exibição para flexbox, o que é importante para que isso funcione. Então justifique-conteúdo: centro; justifica o conteúdo para centralizar e alinhar itens: centralizar; alinha os itens ao centro. Eles trabalham juntos para centralizar horizontalmente o div. Finalmente preenchimento: 100% 0; adiciona 100% de preenchimento ao eixo Y (altura da tela inteira) para centralizar o div verticalmente como antes. Juntando tudo, eles centralizam o div verticalmente e horizontalmente.

Trata-se de centralizar divs usando CSS, Saiba mais

Usando TailwindCSS:

Sim, não posso terminar este artigo sem dizer para você usar o TailwindCSS. É meu framework favorito porque me ajudou muito como iniciante.

Vamos centralizar a div usando TailwindCSS,
Horizontalmente:
Usar TailwindCSS para centralizar um div horizontalmente pode ser feito usando este código:

hello dev

Neste código, a classe TailwindCSS flex define a exibição como flexbox e items-center centraliza o item horizontalmente.

Verticalmente:
Usar TailwindCSS para centralizar um div verticalmente pode ser feito usando este código:

hello dev

Neste código a classe h-screen do TailwindCSS faz o div usando altura de tela cheia, a classe flex define a exibição para flexbox e items-center centraliza o item.

Verticalmente e Horizontalmente:

hello dev

Neste código a classe h-screen faz a div usando altura de tela cheia, a classe flex configura o display para flexbox, items-center centraliza o item e justif-center justifica o item para o centro. Juntar tudo centraliza o div tanto vertical quanto horizontalmente.

Isso é tudo para centralizar divs usando TailwindCSS, Saiba mais

Conclusão:

A centralização de divs pode fazer com que os elementos do seu site se destaquem e é assim que você centraliza uma div HTML.

Certifique-se de praticar e não depender totalmente da memorização de propriedades. Tenha um bom dia :)

Olá, sou estudante e adoro programar. Se meus artigos ajudarem você e você quiser doar, obrigado, pois isso apoiará minha educação e me ajudará a alcançar meu objetivo! Doe Nabir14