masonry responsive horizontal centering

<div class="publications">
  <div class="publication">
    ...
  </div>
  ...
</div>

<?php use_javascript('/ullCorePlugin/js/masonry.min.js') ?>

<script type="text/javascript">          
  $(window).load(function() {
    $('.publications').masonry({
      itemSelector : '.publication',
      isFitWidth: true
    });
  });
</script>


CSS:
.publications {
  overflow: hidden;
  margin: 0 auto;
}

.publication {
  float: left;
  width: 284px; /* 300 - 2*8 */ 
  margin: 0 15px 30px 15px;
  padding: 18px 8px;
}