[TUTORIAL] Como centralizar uma DIV utilizando CSS+HTML de forma fácil

Como centralizar uma DIV utilizando CSS+HTML [TUTORIAL]
Esse vídeo apresenta de forma simples como centralizar uma DIV utilizzando HTML e CSS. São apresentadas duas formas, uma utilizando margin e outro utilizando FLEXBOX.

[@MasterDevTV]

O Código pode ser obtido nesse post do medium medium.com/@thiagolenz/tutorial-como-centralizar-uma-div-com-html-css-4ad05b36f477

[@artesaokyn2098]

Cara, muito obrigado!! De tudo que eu tenho pesquisado, o jeito que você ensinou foi o mais simples e funcional que eu vi de centralizar verticalmente um elemento!! Parabéns pelo trabalho.

[@alexandrebalbino9866]

Enquanto o cara é bem objetivo e eficiente pra ensinar , tem outros que.gaz um arrodeio sem necessidade. Parabéns amigo ! Já ganhou um inscrito!

[@MasterDevTV]

Valeu demais pelo feedback Alexandre!!!

[@emiwakashi4981]

Muito obrigada! Estou começando meu primeiro projeto de portifólio e seu vídeo me ajudou mt! Sucesso!!!

[@MasterDevTV]

Muito obrigado por acompanhar meu canal, em breve trarei mais conteúdos !!

[@joaopaixao7725]

Thx! This video is the definition of KISS, keep it short and simple, very useful!

[@MasterDevTV]

Thank you

[@alessandrosikora5673]

Obrigado pela aula, me adiantou bastante!

[@MasterDevTV]

Valeu pelo feedback !!

[@rethman53]

Rádio, simples e direto ao ponto, parabéns e muito obrigado!

[@MasterDevTV]

Valeu obrigado pelo feedback!!

[@yrlm-dev]

Eu tenho só 10 anos queria aprender a deixar uma div no centro a sua foi a única que eu entendi muito obg ganhou um inscrito e um like

[@MasterDevTV]

Valeu pela audiência, se tiver interessado em Java .. tem mais vídeos no canal. Seja bem vindo!!!

[@Velton_]

Continue com conteúdo assim simples por favor. Resumindo: Deve-se usar margin: auto nos containers filho para centralizar Deve-ser usar justify content: Center e align-itens: Center pai para centralizar Resultado é o mesmo

[@achadinhosdagapee]

Adorei a didática, muito bom!!! obrigadaaaa

[@MasterDevTV]

Obrigado Gabriella, esse é o primeiro vídeo do canal, espero que goste dos demais vídeos que fiz ao longo desse último ano!!

[@MATHEUSEDUARDO-f]

sucesso aí mano

[@MasterDevTV]

Obrigado Matheus !!!

[@isabellalima9119]

Claro e objetivo, obrigada pela explicação!

[@MasterDevTV]

Obrigado por acompanhar meus vídeos Isabella!!!

[@diasemfiltro]

Parabéns. muito bom bem objetivo me ajudou bastante!

[@MasterDevTV]

Valeu !!!

[@edsonferraz1]

Muto legal seu vídeo, parbéns, bem explicado. Mas faz um video com texto nas DIVs e como alinhar os textos

[@MasterDevTV]

Obrigado pelo feedback !!

[@davidcorreia7724]

obrigado pela dica, ajudou muito

[@MasterDevTV]

De nada :D

[@gustavobabolim2001]

Muito boa explicação, obrigado 😊

[@MasterDevTV]

Obrigado Gustavo =)

[@Wladimir-q3t]

Vlw cara, ajudou muito!!!!

[@MasterDevTV]

Obrigado por acompanhar o canal !!!

[@rcbeffects8761]

Salvou muitoooo

[@Vinicio-Sousa]

eu tenho uma dúvida em como fazer um alinhamento que mantenha uma div "container", e em seguida 4 divs, estando 2 na direita e 2 na esquerda. ex: a logo da microsoft

[@MasterDevTV]

Veja se esses links aqui podem te ajudar > tailwindcss.com/docs/flex-basis tailwindcss.com/docs/order tailwindcss.com/docs/flex-grow

[@villardeveloper4499]

Obrigado

[@lucasm.9383]

Muito bom , obrigado!

[@MasterDevTV]

Eu que agradeço Lucas

[@josediegotenorio7011]

Deu certo aqui, valeu!

[@MasterDevTV]

Que bom que ajudou

[@Mari_ane_XX]

Po man muito obrigada Passei meia hora tentando e depois q eu fui ver q esqueci de definir a altura e largura da div kkkkkkkkkkkkkkkkkkk

[@MasterDevTV]

Acontece .. sempre tem um detalhe que a gente esquece mas depois fica tudo certo :D

👏👏👏👏👏👏👏

[@henriquetoledo828]

Ajudou, obrigado!

[@MasterDevTV]

Que bom que ajudou

[@maeltralha2062]

Eu tou com muita dificuldade de alinhar o contêiner pai no centro, só que esse container pai está dentro de outro container paí

[@maeltralha2062]

Tipo eu quero alinhar o form dentro do body, no centro

[@MasterDevTV]

Olá nesse caso teu form vai ter que ter uma largura fixa e aí provavelmente o exemplo que eu fiz nesse vídeo vai funcionar corretamente.

[@maeltralha2062]

@@MasterDevTV pois está muito claro

[@Marioamc_]

Opa amigo ótimo video, uma duvida, essas bordas brancas que ficam envolta elas são padrão ou é possivel tira-las ? no caso pra um projeto de um site a visualização final dele ficaria com essas bordas brancas?

[@MasterDevTV]

Pode ser alguma coisa padrão do browser ou de algum componente css que vc esteja utilizando.. da pra tirar com margin:0 px;

[@metaradio_noticias5787]

não sei se ainda ajuda, mas no meu caso a borda em volta é só colocar em body{ margin: 0px; }

[@nayarabitencourt0]

E quanto é um texto na div? Eu fiz: Texto Já tentei margin / padding / text-align e não coloca no meio do quadrado

[@MasterDevTV]

Oi Nayara, tudo bem? nesse caso você pode tentar algumas coisas 1- garantir que sua div ta com tamanho certo, para validar isso coloque temporariamente uma cor de fundo 2 - Em seguida no css da div coloque a propriedade text-align: center, mais o passo um deve te ajudar =) Não gravei mais vídeos sobre esses temas, posso até gravar mais para frente.

[@luizfelipee7545]

Quantas vezes você precisou desse vídeo pq esqueceu? Eu: Sim.

[@MasterDevTV]

Sim, é bom ter esse vídeo salvo nas listas para poder sempre que precisar olhar novamente hehehe

[@familiasantamassa9385]

Tá salvo, obrigado amigo , vc e um amigo , amigo 🫂

[@silviocesar5220]

o meu em alguns casos funciona mas na maioria nao vai ( flexbox)

[@MasterDevTV]

O Flexbox é um recurso adicionado a alguns anos, talvez possa estar dando conflito com alguma outra propriedade css.

[@silviocesar5220]

@@MasterDevTV tipo assim, pra fazer um header com search bar, botoes na direita links e logo na esquerda tenho que fazer uma gambiarra da disgraça kkkkk

[@soeditraiz5439]

Existe uma solução em que coloque não no meio mais sim na parte de cima que centralize? Ex: Meio Jajdhsjwjhwh Jwnsjdndns

[@MasterDevTV]

nesse caso vc pode colocar o conteúdo "meio" em uma DIV e fazer um text-align: center

[@skreew]

passo no mes minimo umas 4 vezes kkkk