Isotope est un plugin jQuery qui permet d’animer et de filter les blocs de votre page. Vous pouvez l’utiliser avec des images, divs, listes. Ce plugin est également responsive.

Par défaut les blocs sont ferrés à gauche. Si vous souhaitez que votre contenu soit centré, voici la méthode à suivre (avec Isotope V2) :

Cas 1 : les largeurs de blocs sont identiques et fixes

Il faut utiliser le layout mansonry avec l’option isFitWidth.

Il faut fixer une largeur aux colonnes.

masonry: { 
  columnWidth: 100, //largeur des colonnes
  isFitWidth: true 
}

/* on centre le container en CSS */
.grid {
  margin: 0 auto;
}

La largeur doit être fixe et non en pourcentage.
Démonstration

Cas 2 : les largeurs des blocs sont fluides et différentes

Pour un rendu fluide et responsive, on fixe la largeur des colonnes en pourcentage et elles vont automatiquement s’adapter à la largeur du container.

On utilise pour cela le layout masonry avec l’option columnWidth

<div class="grid">
  <!-- .grid-sizer : élément vide, uniquement pour définir columWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }

$('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // on utilise la largeur de grid-sizer
    columnWidth: '.grid-sizer'
  }
})

démonstration