Javascript 是否可以精确居中放置Mashise.js内容？

我正在尝试使用Mashise插件构建一个一到四列的布局，每个页面的设计都是可变的。到目前为止，我喜欢它的工作方式

然而，它留下了一个非常恼人的空白，我似乎无法摆脱的配置

要指出的是，它已经在页面的中心。但是，在居中块中，内容显示为左对齐

内部内容也没有边距。砌体正在初始化为：

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

我已经在CSS中完全消除了.msgblock宽度，所以它是由插件提供的

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

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

---

尝试使用flex方法：

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

更新：要填补空白，您可以使用

stretch

选项。这是一把小提琴

.grid项{
背景：幽灵白；
框大小：边框框；
填充：10px；
显示：内联flex；
最小高度：200px；
自我调整：伸展；
弯曲方向：立柱；
弹性：10自动；
外形：1px实心#dde；
}
.网格项：第n个子项（2n+1）{
背景：幽灵白；
}
.网格项：第n个子项（2n）{
背景：#eef；
}
.行{
宽度：100%；
背景：灰色；
显示器：flex；
柔性包装：包装；
}

第1单元
第2单元
第三单元
第4单元
第5单元

尝试使用flex方法：

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

更新：要填补空白，您可以使用

stretch

选项。这是一把小提琴

.grid项{
背景：幽灵白；
框大小：边框框；
填充：10px；
显示：内联flex；
最小高度：200px；
自我调整：伸展；
弯曲方向：立柱；
弹性：10自动；
外形：1px实心#dde；
}
.网格项：第n个子项（2n+1）{
背景：幽灵白；
}
.网格项：第n个子项（2n）{
背景：#eef；
}
.行{
宽度：100%；
背景：灰色；
显示器：flex；
柔性包装：包装；
}

第1单元
第2单元
第三单元
第4单元
第5单元

经过一些研究和测试，我决定使用CSS Flexbox属性。它做了我需要做的事情，没有像砖石一样麻烦，我的浏览器支持规划可以追溯到IE 11，所以它应该是一个更好的选择。这样做还可以从系统中消除一些JS负载。

经过一些研究和测试，我决定使用CSS Flexbox属性。它做了我需要做的事情，没有像砖石一样麻烦，我的浏览器支持规划可以追溯到IE 11，所以它应该是一个更好的选择。这样做还可以消除系统中的一些JS负载。

运气不好-最右边的缺口仍然存在，并向其中一个添加内容，另一个块是。。。压扁了。它忽略了块宽度属性（动态指定，但仍然没有边距/填充），是否使用等高行内容？或者它们也会像砖石一样？我正在布置一个柱的网格，但在柱内的内容可以是可变的高度。运气不好-最右边的间隙仍然存在，并将内容添加到一个，另一个块是。。。压扁了。它忽略了块宽度属性（动态指定，但仍然没有边距/填充），是否使用等高行内容？或者它们也会像砖石一样？我正在布置一个柱的网格，但在柱内的内容可以是可变的高度。