是否可以精确居中Masonry.js内容？

Question

I am trying to build a layout of one to four columns - variable per page designed on, with the Masonry plugin. So far I've liked how it works.

However, it's leaving a highly annoying gap that with the configurations I cannot seem to get rid of.

To point out - it's already centered on the page. However, within the centered block, the content appears left justified.

The inner content has no margins either. Masonry is being initialized as:

$('.msgblock').masonry({
      columnWidth: '.grid-item',
      gutter: 8,
      itemSelector: '.grid-item',
      fitWidth: true,
      resize: false
}); 

I have eliminated the .msgblock width entirely in CSS, so it is being provided by the plugin.

.msgblock {
    min-height: 100%;
    margin: 0 auto;
    z-index: 1;
}

.grid-item {
    min-height: 100%;
    padding-top: 10px;
}

Answer 1

Try using the flex method:

.grid-item {
    min-height: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Update: to fill the gap you can use the stretch option. Here's a fiddle

 .grid-item { background: ghostwhite; box-sizing: border-box; padding: 10px; display: inline-flex; min-height: 200px; align-self: stretch; flex-direction: column; flex: 1 0 auto; outline: 1px solid #dde; } .grid-item:nth-child(2n+1) { background: ghostwhite; } .grid-item:nth-child(2n) { background: #eef; } .row { width: 100%; background: gray; display: flex; flex-wrap: wrap; } 

 <div class="row"> <div class="grid-item" style='min-width:60%'>Cell 1</div> <div class="grid-item" style='min-width:35%'>Cell 2</div> <div class="grid-item" style='min-width:45%'>Cell 3</div> <div class="grid-item" style='min-width:25%'>Cell 4</div> <div class="grid-item" style='min-width:15%'>Cell 5</div> </div> 

Answer 2

After some research and testing, I've decided to go with the CSS Flexbox property. It does what I need to do without as much hassle as Masonry, and my browser support planing goes back for IE 11 - so it should be a better choice. Doing this also eliminates some JS load from the system.