Como centralizar elementos com CSS (margin, flexbox, grid layout) - Dica rápida #1 #Shorts

E aí Dev, você também já sofreu pra centralizar elementos HTML com CSS? Nesse vídeo eu te mostro 3 opções (as melhores na minha opinião) de como fazer isso.
#Shorts

💬 Redes sociais

[Bruno-ytjk]

Desde que o width e height estejam definidos.

[Bolivarpr]

salvou muito obrigado parabéns pelo conteúdo!

[frank]

O começo do vídeo é literalmente eu aprendendo css

[franguimaraes]

Era exatamente o que eu estava procurando, deu até um alivio em ver as imagens alinhadas e centralizadas no site <3

[MatheusLima-ktpd]

Não sabia dessa do place-items. Valeu amigo 👍

[gabrielmatias]

Me ajudou quando tava precisando, obrigado !

[felipemoura]

veio literalmente no momento que eu to sofrendo com isso, valeuu

[chapulinazulado]

Antigamente a referência era a ponta superior esquerda da div ..

Precisava da ré na div pra centralizar ..

O flex box usa o eixo central da div .

[keitiwislli]

nossa muito obgd, um professor meu aqui do youtube ia me ensinar a centralizar uma tabela solta no body só mais p frente, mas eu tava agoniada com ela no canto e tudo no meio certinho

[Programador-fu]

Já falaram, mas... O align items e o justify content só alinham o filho no elemento pai, não na tela inteira. A altura e a largura do pai deve ser definida.

Caso queiram alinhar no centro usem height de 100dvh
E width de 100dvw no pai.

Recomendo nao usar vh ou vw por ela não funcionar em todos os tamanhos de tela. Ao invés disso recomendo fazer como dito acima: dvh e dvw.

Importante também fazer um reset css, para fazer o reset basta digitar no início de teu css:
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}

[bestsport]

Sabe como eu faço para mudar a cor do body usando hover? Mas o mouse n vai estar em cima do body para a mudança de cor, mas em outro elemento, tipo, um quadrado no meio

[endergames.]

por que essa parte de centralizar e tao dificil mds

[y]

"ok google... como centralizar uma div"