Como centralizar no CSS? 3 formas, Vertical/Horizontal + Bônus

แชร์
ฝัง

ความคิดเห็น • 125

  • @Evy0688
    @Evy0688 2 ปีที่แล้ว +9

    Obrigadaaaaaaa, tava batendo cabeça pra centralizar uma imagem num portfólio pessoal que estou criando (sou iniciante), me ajudou muito e matou minha frustração heheheh... Deus abençoe, gratidão

  • @mayconcampos3439
    @mayconcampos3439 3 ปีที่แล้ว +1

    MUITO obrigado

  • @analopes-to3dd
    @analopes-to3dd 4 ปีที่แล้ว +6

    Cara, você explica muito bem, você faz as pessoas aprenderem com facilidade é sensacional seu método.

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Muuuuito obrigado ana!!! fico muito feliz de ler isso

    • @soeliamiranda300
      @soeliamiranda300 3 ปีที่แล้ว

      🍓😍🍌🍦🥚🍦😍🍌

  • @luan9871
    @luan9871 3 ปีที่แล้ว +1

    único que me ajudou, vlw

  • @ianomaciel3619
    @ianomaciel3619 3 ปีที่แล้ว +1

    Vídeo massa!

  • @felipevergilio2483
    @felipevergilio2483 8 หลายเดือนก่อน +1

    mtooooo obg 4 anos depois e seu vídeo ajudou d++++++

    • @DevSoutinho
      @DevSoutinho  8 หลายเดือนก่อน

      Fico feliz!!!

  • @vicentedepaula4878
    @vicentedepaula4878 3 ปีที่แล้ว +1

    Boa noite. Meu notebook é o Itautec Pentium Intel Inside. Prof. Dr. Vicente de Paula Mursci

  • @abrakadbra141
    @abrakadbra141 2 ปีที่แล้ว

    Caralho... Salvou minha madrugada irmão!!!!!! Muito obrigado

  • @xrf-j9q
    @xrf-j9q 3 ปีที่แล้ว +1

    O único vídeo que me ajudou em exatamente 2:10. Obrigada!

  • @lias8791
    @lias8791 2 ปีที่แล้ว +1

    mt obrigado cara! eu precisava centralizar uma div usando media queries e nada do que eu tava fazendo funcionava até eu testar o justify, você me ajudou mt, de vdd.

  • @josiclerlemesilva317
    @josiclerlemesilva317 4 ปีที่แล้ว +5

    Muito masa mano! Parabéns pelo canal e pela qualidade dos vídeos !!!!

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Cara muitissímo obrigado! Fico feliz de ajudar \o

  • @antonio195br
    @antonio195br 3 ปีที่แล้ว +3

    Essa terceira opção me salvou demais.

  • @matheuskielkowski
    @matheuskielkowski 4 ปีที่แล้ว +3

    Muito massaaaaaaa mano! Parabéns pelo canal e pela qualidade dos vídeos !!!!

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Aaaaaaaaaa valeuzao \o/ fica que nas próximas semana tem mais hahahah

  • @michaelsantos993
    @michaelsantos993 3 ปีที่แล้ว +1

    Ajudou muito, e a explicação elimina qualquer dúvida...

  • @lucasmontblanc3932
    @lucasmontblanc3932 3 ปีที่แล้ว +1

    A tag center não é mais usada?

  • @israellucas299
    @israellucas299 ปีที่แล้ว

    mano esse cara, sem palavras I LOVE YOU.

  • @juscp11
    @juscp11 4 ปีที่แล้ว +3

    Opa, fala Soutinho!
    Acompanho você através dos podcast do hipster e agora pelo youtube.
    Obrigado por compartilhar conhecimento!
    Abraço

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Que massa!!!! Po brigadão, espero que curta os vídeos aqui no canal, em breve vou chamar o Paulo pra um vídeo também ahhaah

  • @wesleysousa7150
    @wesleysousa7150 3 ปีที่แล้ว +2

    Você é demais, descomplica com humor e conhecimento. Parabéns pelo vídeo. Top, Top, Top.

  • @dynhoxx
    @dynhoxx 3 ปีที่แล้ว +1

    O display: flex; é o modo mais simples para mim que estou apredendo.
    Obrigado pelo vídeo!

    • @gabrielofront-end2553
      @gabrielofront-end2553 2 ปีที่แล้ว

      Mas pra formulário ele é ruím pra fzr, pq no celular não vai quebrar, e as páginas não vão ficar certas

  • @rodrigom2963
    @rodrigom2963 3 ปีที่แล้ว +1

    show me ajudou de mais com as margens

  • @samuxui
    @samuxui 4 ปีที่แล้ว +2

    Olá amigo, boa noite!
    Acabo de me inscrever no seu canal.
    Fiquei com uma dúvida:
    Pra que serve esse atributo dentro da tag style "contenteditable" ? Vi que vc está usando ele internamente e se fosse em um arquivo externo?

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Opa, ela faz com que qualquer texto dentro de uma tag seja editável, é quase que fazer uma div virar um input por ex. (Se for usar isso no dia a dia é importante colocar os atributos de acessibilidade também)

    • @samuxui
      @samuxui 4 ปีที่แล้ว

      @@DevSoutinho Bacana, fiz o teste aqui.
      Então é um recurso que muitos page-builder utiliza né? Agora só não sei como eles fazem pra salvar as infos, deve que usa JS né.
      Obrigado pelo feedback amigo!

  • @lucaslsamaro
    @lucaslsamaro 3 ปีที่แล้ว +1

    Como vc fez a caixa cinza?

  • @martinabranco9640
    @martinabranco9640 2 ปีที่แล้ว +2

    salvou minha vida, muito obrigada!!!!

    • @DevSoutinho
      @DevSoutinho  2 ปีที่แล้ว +1

      😍😍😍😍 tamo junto \oo

  • @Dudscpa
    @Dudscpa 4 ปีที่แล้ว +2

    Cara curti de mais esse vídeo, manda mas dicas dessas. Isso salva vidas, principalmente a minha que to começando. kkkkkkkkkkkkk

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Opaaaa, cara faz uma tour no canal de JavaScript tem bastante de CSS eu to me organizando pra trazer mais :)

  • @edileneamaral2270
    @edileneamaral2270 3 ปีที่แล้ว

    Vc podia fazer um video explorando a tag

  • @RodrigoMoreiraSouza
    @RodrigoMoreiraSouza 4 ปีที่แล้ว +3

    Ótimo vídeo! Ainda uso alguns outros modos que uso pra centralizar, principalmente verticalmente... Uso esses que mencionou no vídeo e já usei tbm o parent com display table, sendo os filhos com table-cell, e tbm usando translate X e Y negativos com posição absoluta... Vídeo salvo nos favoritos com sucesso 👏🏻👏🏻👏🏻

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว +1

      Hehehe você colaborou legal com o vídeo, valeu pelo comentário. Quem ler ele já vai ver outras formas :)

  • @eduardoguedes7409
    @eduardoguedes7409 3 ปีที่แล้ว +1

    Passei uns dias tentando descobrir o final do arco-íris de posicionamento de elementos em css e finalmente encontrei o tesouro!!!
    Vídeo espetacular meus parabéns ganhou um inscrito novo !!!🤩🤩🤩🤩🤩🤩🤩

  • @anacarolinahernandes
    @anacarolinahernandes 4 ปีที่แล้ว +3

    Aula excelente, Mario. Muito obrigada!

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว +1

      Aeeeee, valeuzao!!! E eu ti dei aula na Caelum né?

    • @anacarolinahernandes
      @anacarolinahernandes 4 ปีที่แล้ว

      @@DevSoutinho Sim, Mario. Na primeira turma de React e React Native. 💪🏻

  • @ewerthonsilva7642
    @ewerthonsilva7642 4 ปีที่แล้ว +8

    Assim que aprendi Flexbox eu meio que abandonei as outras formas (por que não conseguia entender o comportamento dos elementos), mas pqp, agora que eu entendi realmente como eles se comportam, percebi que dá pra "mesclar" bastante os displays e fazer várias coisas, mt foda velho

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว +4

      Boooa!!!! É um conhecimento libertador, poder ir combando as coisas resolve vários sonhos dos designers que seriam pesadelos pro Front haha

  • @ambiesport
    @ambiesport ปีที่แล้ว

    amigo primeiramente parabens pelos videos, te desejo sucesso e prosperidade. Eu tenho loja na shopify e uso o tema SENSE, não se você conhece da shopify. Mas tenho tentado centralizar imagem e também excluir espaços em branco que não tem como minimizar nas configurações. So no CSS. poderia me ajudar?

    • @DevSoutinho
      @DevSoutinho  ปีที่แล้ว

      Puts, eu manjo pouco de Shopify, mas no suporte deles eles n conseguem dar um norte nisso? 🤔

  • @XlovedDesign
    @XlovedDesign 4 ปีที่แล้ว +2

    Depois de trabalhar com Vuejs que criava um fallback de Flexbox pra Intertnet Explorer eu me viciei em centralizar tudo com display: flex. Mesmo se não precisasse de ser flex eu coloco só pra poder usar tudo que o align-items e o justify-content tem pra oferecer

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Bom ponto, se o projeto que você trabalha precisa de uma compatibilidade mais antiga é complicado mesmo. Mas dependo do projeto da pra negociar isso ainda, criar umas regras do quanto precisa tá funcionando e tal

    • @XlovedDesign
      @XlovedDesign 4 ปีที่แล้ว

      @@DevSoutinho Mas hoje em dia tem bastante coisa pra resolver problemas de compatibilidade, como nesse caso que já vem imbutido no Vuejs pelo CLI deles mas que é uma ferramenta a parte. Se não me engano é o AutoPrefixer do PostCSS que fazia isso, tinha pra CSS Grid apesar de não ser muito confiável o resultado final nos navegadores que precisassem do fallback.

  • @Yan-zg8us
    @Yan-zg8us 3 ปีที่แล้ว +2

    Krl man, tu me salvou. Vi altos vídeos mas nenhum explicava com clareza e fazia as parada correndo, tu não. Explicou direitinho, valeu! Só mais uma dúvida, pq quando é absolute ele centraliza e quando é relative não?

  • @filipetarcioh481
    @filipetarcioh481 2 ปีที่แล้ว

    O cara é muito bom, não tem como. Parabens

  • @cleverson_lira
    @cleverson_lira 3 ปีที่แล้ว +1

    Professor, como centralizo um elemento, dentro de um elemento centralizado?
    Por exemplo, centralizar um input, dentro de uma div centralizada com position.

    • @luksilverfox
      @luksilverfox 2 ปีที่แล้ว

      #container {
      /*Esse aqui será a div pai, utilizando margin auto, padding, bottom, width, height para dar forma*/
      }
      .nomedaclass {
      /*Essa aqui será a div filho, utilizando *margin* para centralizar, ou alinhar em relação ao texto... auto, padding, bottom, width, height etc... para dar o alinhamento necessário...*/
      }
      tudo aqui...
      Fiz pelo celular... Mas repara no vídeo, ele é justamente sobre isso...

  • @juliabia9052
    @juliabia9052 ปีที่แล้ว +1

    isso serve para centralizar video ? e flexibilizar ele ?

  • @douglasdoro
    @douglasdoro 4 ปีที่แล้ว +2

    daora, mano. tem como aumentar um pouco a fonte do editor? isso ta pegando um pouco nos videos que vi até agora. valeu pelo conteúdo!

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว +1

      Cara eu vacilei nisso em vários vídeos :( agora ta no checklist e to tentando lembrar sempre!

    • @douglasdoro
      @douglasdoro 4 ปีที่แล้ว

      @@DevSoutinho boa. de qualquer forma é bem massa sua didática.
      um sugestão de video: refactoring em js.
      abraço

  • @devHB
    @devHB 2 ปีที่แล้ว

    D1.3 - start maratona do canal;

  • @f.b.i7172
    @f.b.i7172 ปีที่แล้ว +1

    Que vídeo incrível

  • @karynalopes3577
    @karynalopes3577 2 ปีที่แล้ว +1

    você salvou a minha vida! s2 :D

  • @gabrieldias3663
    @gabrieldias3663 3 ปีที่แล้ว +1

    Por mais vídeos como esses 👏🏻👏🏻👏🏻

  • @andersonsantiago3604
    @andersonsantiago3604 2 ปีที่แล้ว +1

    Curtido e inscrito, manow ql esse editor? mto top""!!!

    • @DevSoutinho
      @DevSoutinho  2 ปีที่แล้ว

      OpAA é o visual studio code 😍

  • @giselerodrigues7016
    @giselerodrigues7016 ปีที่แล้ว

    Obrigada pelo vídeooo, muito bom!

  • @annyg3411
    @annyg3411 2 ปีที่แล้ว

    Tsx e react da no mesmo?

  • @fabiolibonati3855
    @fabiolibonati3855 3 ปีที่แล้ว +2

    Ótima explicação, agora vou parar de mexer só em código e enfrentar mais o css. kkkk

    • @DevSoutinho
      @DevSoutinho  3 ปีที่แล้ว +1

      Haaaa CSS é código puro 👀

    • @fabiolibonati3855
      @fabiolibonati3855 3 ปีที่แล้ว

      @@DevSoutinho Tem razão, acho que estou menosprezando muito o CSS XD

  • @luizfelipezimbrao2100
    @luizfelipezimbrao2100 4 ปีที่แล้ว +1

    ANJO!
    ajudou demais

  • @rcamis
    @rcamis 4 ปีที่แล้ว +2

    Ótimo video, bom trabalho, faz mais videos de css e videos de react seria interessante tbm.

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Cara fica de olho que nas próximas semanas o React vai cair de prato cheio aqui haha

  • @AdriiPing
    @AdriiPing 4 ปีที่แล้ว +2

    Massa, vou aplicar isso amanhã

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว +1

      Me fala se deu certo 👀

    • @AdriiPing
      @AdriiPing 4 ปีที่แล้ว +1

      Deu sim, valeeu :D

  • @maysalemos2740
    @maysalemos2740 4 ปีที่แล้ว +2

    Vídeo excelente 👌

  • @moacirjunior1346
    @moacirjunior1346 ปีที่แล้ว

    Em 99% dos casos eu display flex. Além dos comandos serem mais semânticos e simples de entender ele é melhor para outros tipos de posicionamento. Quanto tem mais de um elemento filho ou em outros alinhamentos.

  • @lucasmurilo482
    @lucasmurilo482 4 ปีที่แล้ว +2

    like, me ajudou muito

  • @viniciusgomes285
    @viniciusgomes285 2 ปีที่แล้ว

    ótimo vídeo

  • @galaxycityrp538
    @galaxycityrp538 3 ปีที่แล้ว +1

    MEUITO OBG AJUDOU MUITO +1 INSCRITO E +1 LIKE

  • @ICARO7
    @ICARO7 ปีที่แล้ว

    Muito bom professor! 🙏😃

  • @MarlonEnglemam
    @MarlonEnglemam 4 ปีที่แล้ว +2

    maravilha de vídeo!

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Opa! Muito obrigado 😁

  • @larissasantos6367
    @larissasantos6367 2 ปีที่แล้ว

    Que vídeo maravilhoso!!!!

  • @jamescannl
    @jamescannl 2 ปีที่แล้ว

    perfeito muito bom

  • @keziasoares177
    @keziasoares177 3 ปีที่แล้ว +1

    Obrigada pela aula

  • @taisclaumann9684
    @taisclaumann9684 2 ปีที่แล้ว

    e se eu quisesse centralizar o conteúdo de um botão? Estou tendo um probleminha porque um botão meu ocupa duas rows, consegui ajustar o tamanho do botão, mas o conteúdo dentro do botão não fica centralizado
    Saberia de uma forma?

    • @DevSoutinho
      @DevSoutinho  ปีที่แล้ว

      Você pode usar o display flex, na tag botão.

  • @carloseduardofiani6168
    @carloseduardofiani6168 2 ปีที่แล้ว

    Vlw irmão

  • @diegod4553
    @diegod4553 3 ปีที่แล้ว +1

    Resolução do problema, minuto 9:8

  • @felipemotaax
    @felipemotaax 2 ปีที่แล้ว +1

    5:10 Método flexbox

  • @Rafael11piraju
    @Rafael11piraju ปีที่แล้ว

    bom demais

  • @lauro.g33
    @lauro.g33 3 ปีที่แล้ว

    Serve pra centralizar um video?

  • @rebecaalencar6790
    @rebecaalencar6790 ปีที่แล้ว

    eu te amo

  • @PontoPreto
    @PontoPreto ปีที่แล้ว +1

    Lembrem-se na parte do "position: absolute;" o elemento pai deve receber sempre o "position: relative;" caso contrário vai dar 💩kkkkkkk.
    Só para ajudar quem não entendeu direito.

    • @DevSoutinho
      @DevSoutinho  ปีที่แล้ว

      Boa!!! Valeu pelo comentário

  • @venommotorrockerbass
    @venommotorrockerbass 3 ปีที่แล้ว

    Show

  • @andrelopes1627
    @andrelopes1627 3 ปีที่แล้ว

    muito bom!!!!

  • @weitonmatos9810
    @weitonmatos9810 2 ปีที่แล้ว

    Sick!

  • @agathabranca9889
    @agathabranca9889 3 ปีที่แล้ว

    preciso de ajuda com o html, alguém me ajude?

  • @marcelod.3490
    @marcelod.3490 2 ปีที่แล้ว

    Meu Deus! Continuo minha busca por alguém que explique isso direito, não foi dessa vez...

  • @gustavo194l
    @gustavo194l 3 ปีที่แล้ว

    Como funciona o Can I Use ?

    • @guilhermedelima831
      @guilhermedelima831 3 ปีที่แล้ว

      Entrando lá vc pode pesquisar uma propriedade e ver a compatibilidade com base em vários navegadores com várias versões diferentes. É literalmente só pesquisar lá

  • @Diovo
    @Diovo 4 ปีที่แล้ว +1

    Like like like

    • @DevSoutinho
      @DevSoutinho  4 ปีที่แล้ว

      Valeu valeu valeu hahahau

  • @yuripadilha4907
    @yuripadilha4907 4 ปีที่แล้ว +1

    Boa (;

  • @ickschreiber3493
    @ickschreiber3493 3 ปีที่แล้ว

    thx!!!!

  • @PedroHenriqueTSI
    @PedroHenriqueTSI 4 ปีที่แล้ว +1

    Showw!

  • @giselerodrigues7016
    @giselerodrigues7016 ปีที่แล้ว

    Alguém tem interesse em fazer um projeto? Não manjo de JS, mas tenho noções de HTML e CSS

  • @vxkawanmtfe1597
    @vxkawanmtfe1597 3 ปีที่แล้ว

    Como eu vim parar aqui? Tô chapado kkķkkk mas me expliquem oq é isso

  • @ncyvarela1563
    @ncyvarela1563 ปีที่แล้ว

    não sei se é pq eu sou iniciante
    mas eu fiquei mais confusa vendo esse vídeo do que já estava
    vou rever momentos depois

    • @DevSoutinho
      @DevSoutinho  ปีที่แล้ว

      Tenta rever com calma e escrevendo o código na sua máquina e fazendo os seus testes, ajuda bastante!