css - 使用 'display:table' 和 'masonry' 时无法使元素 100% 高度

Question

我正在使用 masonry 来显示图像。我希望文本出现在每张图片的中间，为此我将父项显示为表格，将子项显示为表格单元格。我无法将父包装器设置为 100% 高度。

<div class="grid">
 <div class="grid-sizer"></div>
 <div class="grid-item">
  <div class="wrapper">
   <div class="title">
    <h1>Title Here</h1>
   </div>
  </div>
 <img src="any-image.jpg"/>
</div>

.grid-sizer, .grid-item {
   width: 33.333%;
 }
.grid-item {
   float: left;
   overflow:hidden;
   position:relative;
 }
.wrapper {
   display:table;
   position:absolute;
   text-align:center;
   width:100%;
   height:100%;
   top:0;
   bottom:0;
   left:0;
   right:0;
 }
.title {
   display: table-cell;
   vertical-align: middle;
   width:100%;
   height:100%;
 }
.grid-item img {
   display: block;
 }

我也明白，如果我定义 .grid-item 的高度，文本将居中，但这会随着视口(viewport)大小而变化，因此我无法定义单一大小。

如果有帮助，这里有一个 fiddle :https://jsfiddle.net/j32921b9/

感谢您的帮助。

Answer 1

我可能会建议您使用另一种方法，而不使用表格。将绝对位置添加到您的文本包装器并像这样对其进行转换:

.title {
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color:#fff;
 }

在这里updated fiddle .