Alignement d'un élément bloc avec une marge gauche en CSS

La valeur auto pour margin peut en réalité faire plus que simplement centrer. En fait, cette valeur permet de calculer la marge automatiquement et de la rendre aussi grande que possible. Lorsque nous mettons auto pour les marges gauche et droite - l'élément est centré.

On peut, cependant, ne définir que la marge gauche. Dans ce cas, l'élément obtiendra la marge gauche maximale possible et occupera la position extrême droite :

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

css.parent {
  padding: 10px 0;
  border: 1px solid red;
}
.child {
  margin-left: auto; /* on définit une marge gauche automatique */
  height: 100px;
  width: 200px;
  border: 1px solid green;
}

Результат: