Позиционирање на блок елементи во CSS

Својството margin не се користи само за задавање на растојанија, туку и за центрирање на блок елементи. За ова, десното и левото растојание треба да се зададат како auto.

Во примерот подолу внатрешниот блок ќе се постави во центар:

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;
}

Результат:

Имајте предвид дека на овој начин може да се центрираат само блок елементи, само хоризонтално и само ако им е зададена ширина.

Ако ни требаат различни горни и долни растојанија margin, тогаш може да се напише вака:

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

Може да се препише и преку три вредности: првата ќе го зададе горното растојание, третата - долното, а втората ќе ја зададе вредноста auto за десното и левото растојание:

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