Centralizando elemento na tela

by Yure Pereira

HTML

<h1>Centralizando elemento na tela</h1>

<p>Primeiramente para você poder centralizar um elemento na tela do browser usando a própriedade CSS margin, você tem que saber se o elemento a qual você quer centralizar tem o tipo de box por padrão ou definido como block, mas caso por padrão ele não seja de block, você pode definir isso usando a própriedade CSS display da seguinte forma abaixo:</p>

<code>display: block;</code>

<p>
Depois que sabemos que o elemento é de bloco, ou definindo de tal forma, para que podemos centraliza-lo, temos que definir o tamanho da langura desse elemento na tela com a própriedade width com um tamanho que sela maior que zero.
</p>

<p>
Como exemplo prático segue o seguinte abaixo:
</p>

<code>display: block;</code>

<footer class="rodape">
    <div class="centralizar"></div>
</footer>

CSS

.rodape {
   
  height: 100px;
  background: #444;

}

.centralizar {

  width: 100px;
  height: 100px;
  background: #888;
  margin: 0 auto;
  
}