Alinhamento de elementos de bloco em CSS

A propriedade margin é usada não apenas para definir margens, mas também para centralizar elementos de bloco. Para isso, as margens direita e esquerda devem ser definidas como auto.

No exemplo abaixo, o bloco interno ficará centralizado:

html<div class="parent">
  <div class="child"></div>
</div>

css.parent {
  border: 1px solid red;
}

.child {
  height: 100px;
  width: 200px;
  border: 1px solid green;
  margin: 10px auto;
}

Результат:

Lembre-se, dessa forma você pode centralizar apenas elementos de bloco, apenas horizontalmente e apenas se uma largura for definida para eles.

Se precisarmos de margens superior e inferior diferentes margin, podemos escrever assim:

css.child {
  margin: 30px auto 10px auto;
}

Também pode ser reescrito com três valores: o primeiro definirá a margem superior, o terceiro - a inferior, e o segundo definirá o valor auto para as margens direita e esquerda:

css.child {
  margin: 30px auto 10px;
}