Masonry - how to stop Masonry floats all my grid items to left?

Question

How can I justify masonry grid items to centre?

It seems that Masonry floats all my grid items to left or justifies the content to left:

 <div class="wrap">
  <div class="parent grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
  </div>
</div>

CSS:

* {
    box-sizing: border-box;
    font-family: Arial, Sans-serif;
}

.wrap {
    background: #FFD54F;
    text-align: center;
}

.parent {
    text-align: center;
    width: 600px;
    display: inline-block;
    border: 1px solid black;
}

.parent > div {
    width: 200px;
    height: 100px;
    background: white;
    margin:5px;
    padding:20px;
    display: inline-block;
}

.parent > div > div {
    font: bold 30px Arial, Sans-serif;
    color: white;
    width: 50px;
    height: 50px;
    background: #FAB400;
    border-radius: 50%;
    padding: 9px;
    text-align:center;
}

jsfiddle

What I am trying to achieve is this:

Is it possible?

Answer 1

You can just add another container to .parent and set its width just exactly the size of child elements including the margins and display it on the center. check this out:

.parent {
    text-align: center;
    width: 60%;
    display: inline-block;

}
.parent-parent{
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
} 

Sample

Answer 2

best thing, i think you can using flex for this.

this is the link may help you to modify anything about flex all about flex

and this is the code i rewrite from your fiddle

$('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    percentPosition: true
});

* {
        box-sizing: border-box;
        font-family: Arial, Sans-serif;
    }

    .wrap {
        background: #FFD54F;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .parent {
        width:600px;
        border: 1px solid black;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
    }
    .grid{
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      width:430px;
      height:100%;
    }
    .parent .grid-item {
        width: 200px;
        height: 100px;
        background: white;
        margin:5px;
        padding:20px;
        
    }

    .grid-item div {
        font: bold 30px Arial, Sans-serif;
        color: white;
        width: 50px;
        height: 50px;
        background: #FAB400;
        border-radius: 50%;
        padding: 9px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="parent">
   <div class="grid">
    <div class="grid-item"><div>1</div></div>
    <div class="grid-item"><div>2</div></div>
    <div class="grid-item"><div>3</div></div>
    <div class="grid-item"><div>4</div></div>
    <div class="grid-item"><div>5</div></div>
   </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>