CSS centralização de uma div

MugenShion · 28 de abril de 2019

Olá, eu entendi a lógica do margin, mas se eu quiser centralizar uma div especifica na body sem ter que declarar uma largura para minha body ?

GabrielSennaMs · 28 de abril de 2019

@MugenShion Vou responder sua duvida com uma pergunta. Como você centraliza algo que não tem um tamanho definido?

MugenShion · 28 de abril de 2019

definindo um tamanho certo ?

GabrielSennaMs · 28 de abril de 2019

@MugenShion Você não necessita declara um tamanho para sua Body e sim para o elemento que você quer centralizar, depois você utilizar a propriedade margin: 0 auto; no elemento, assim centralizando ele dentro do Body.

MugenShion · 28 de abril de 2019

ahh então todo elemento eu tenho que definir a largura dele? ou seja body seria um elemento certo?

Adriano_web · 28 de abril de 2019

@MugenShion Se você não definir a largura do elemento então você deve considerar se ele é um elemento de nível de bloco ou elemento inline. Se for elemento de nível de bloco você alinha ele com uma largura fixa e o margin: auto; se for um elemento inline você deve centraliza-lo com text-align: center; declaração.

MugenShion · 28 de abril de 2019

eu tava estudando e também cheguei na propriedade display onde definimos que tipo de elemento ele é, mas se fizermos isso:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      div.ex1{
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="ex1">Meu Bloco</div>
  </body>
</html>

no caso definimos que nosso elemento é um bloco e que estamos definindo que as margins vão ser automáticas certo ? quando é automática ele pega a largura divide pela tela e coloca o resultado no valor da propriedade margin nos lados horizontais..

GabrielSennaMs · 28 de abril de 2019

@MugenShion Esse tutorial pode te ajudar a entender o uso do display e da margin: http://pt-br.learnlayout.com/display.html, http://pt-br.learnlayout.com/margin-auto.html

Adriano_web · 28 de abril de 2019

@MugenShion Correto, mas você deve saber quais os níveis de cada elemento, por exemplo, o elemento <div> como padrão já está no modo de exibição de bloco, então display: block não é necessário pois o mecanismo de renderização do navegador já sabe disso, e um elemento <span> por exemplo, é um elemento inline(em linha) por padrão.