Html 不带柔性箱的垂直定心

伙计们，我面临一个问题，我正在做的是创建一个具有叠加效果的图像网格，它不只是一个具有绝对位置的容器，当有人悬停在上面时，它有一些标题和文本。
网格每行只能有3个图像。这一切都很好，但我想垂直中心的标题和段落文本根据父元素的叠加效果。我知道我可以通过使用

flexbox

来做到这一点，但我想要浏览器兼容性，这就是为什么我不使用

flexbox

。有没有一种方法可以不用flexbox来实现这一点

*，
一行
上校{
框大小：边框框；
}
身体{
字体：1em/1.5“开放式SAN”，无衬线；
颜色：#373737；
背景：#eaeaea；
}
h1，
h2，
h3{
文本转换：大写；
}
氢{
字号：1.125em；
颜色：#4a89ca；
字号：600；
保证金：0；
}
h3{
字体大小：1.3em；
线高：1.25em；
边缘顶部：.85em；
边缘底部：.5em；
}
p{
字体大小：.875em；
线高：1.4；
边缘：0.1.5em；
}
.集装箱{
最大宽度：1260px；
宽度：94.02985075%；
背景：#fff；
保证金：自动；
}
.罗：之前，
.罗：之后{
内容：“；
显示：表格；
}
.罗：之后{
明确：两者皆有；
}
.行{
文本对齐：居中；
边缘底部：10px；
}
.排：最后一个孩子{
页边距底部：0；
}
上校{
位置：相对位置；
浮动：左；
显示：块；
}
.col+.col{
左缘：1.6%；
}
.col-4{
宽度：32.266667%；
线高：0；
溢出：隐藏；
}
.col-4 img{
最大宽度：100%；
显示：块；
背景色：#eaeaea；
}
.照片叠加{
位置：绝对位置；
左：0；
左侧填充：20px；
右边填充：20px；
排名：0；
底部：0；
右：0；
颜色：#fff；
背景色：rgba（0,0,0,5）；
}
/* =================================
照片叠加过渡
==================================== */
.照片叠加{
不透明度：0；
转变：不透明度。5s；
}
.照片覆盖：悬停{
不透明度：1；
}

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

一些标题
这是一个非常重要的问题。这是一个很好的例子

将

.photo overlay

中的文本放入另一个div，并为该div指定以下样式：

position: absolute;
top: 50%;
transform: translateY(-50%);

是的，你可以用。将所需内容包装在其自己的容器中，然后使用

position:absolute

*，
一行
上校{
框大小：边框框；
}
身体{
字体：1em/1.5“开放式SAN”，无衬线；
颜色：#373737；
背景：#eaeaea；
}
h1，
h2，
h3{
文本转换：大写；
}
氢{
字号：1.125em；
颜色：#4a89ca；
字号：600；
保证金：0；
}
h3{
字体大小：1.3em；
线高：1.25em；
边缘顶部：.85em；
边缘底部：.5em；
}
p{
字体大小：.875em；
线高：1.4；
边缘：0.1.5em；
}
.集装箱{
最大宽度：1260px；
宽度：94.02985075%；
背景：#fff；
保证金：自动；
}
.罗：之前，
.罗：之后{
内容：“；
显示：表格；
}
.罗：之后{
明确：两者皆有；
}
.行{
文本对齐：居中；
边缘底部：10px；
}
.排：最后一个孩子{
页边距底部：0；
}
上校{
位置：相对位置；
浮动：左；
显示：块；
}
.col+.col{
左缘：1.6%；
}
.col-4{
宽度：32.266667%；
线高：0；
溢出：隐藏；
}
.col-4 img{
最大宽度：100%；
显示：块；
背景色：#eaeaea；
}
.照片叠加{
位置：绝对位置；
左：0；
左侧填充：20px；
右边填充：20px；
排名：0；
底部：0；
右：0；
颜色：#fff；
背景色：rgba（0,0,0,5）；
}
/* =================================
照片叠加过渡
==================================== */
.照片叠加{
不透明度：0；
转变：不透明度。5s；
}
.照片覆盖：悬停{
不透明度：1；
}
/*新的*/
.照片覆盖：悬停>div{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

一些标题
这是一个非常重要的问题。这是一个很好的例子