Html 具有透明背景和居中文本的CSS响应网格

为了得到一个有半透明背景和水平和垂直居中文本的响应网格，我们花了几个小时的时间。除了居中的文本和背景覆盖，所有的东西都可以使背景图像变暗

这是一个网格项：

<article class="grid-box">
    <div class="grid-wrapper">
        <div class="grid-content">
            <div class="grid-background">
                <header>
                   <h2>Main</h2>
                   <h3>Sub</h3>
                </header>
            </div>
        </div>
    </div>
</article>

这是jsfiddle。 在这里生活是一种考验：

标题{ 文本对齐：居中； } .格栅箱{ 宽度：100%； 最大宽度：400px； -webkit框大小：边框框； -moz框大小：边框框； -o型盒尺寸：边框盒； -ms框尺寸：边框框； 框大小：边框框； } .网格盒.网格包装器{ 溢出：隐藏； 宽度：100%； } .grid-box.grid-wrapper.grid-content{ 背景：urlhttps://www.dennisjauernig.com/wp-content/uploads/getting-ready-hochzeitsfotos-hochzeitsfotograf.jpg; 背景尺寸：封面； 背景位置：中心； 背景重复：无重复； -webkit转换：所有500毫秒的易入易出； -moz转换：所有500毫秒的输入输出都很轻松； -o型过渡：所有500ms的缓进缓出； -ms转换：所有500ms的缓进缓出； 过渡：所有500ms的缓进缓出； 垫底：67%； 宽度：100%； 身高：0； } .grid box.grid wrapper.grid内容：悬停{ -moz变换：scale1.1； -o变换：scale1.1； -webkit转换：scale1.1； 转换：scale1.1； } .网格背景{ 背景：urlhttps://www.dennisjauernig.com/wp-content/themes/selfmade/images/transparent05.png; } 主要的 附属的

---

垂直定心总是很困难的，除了桌子

将.grid内容的位置设置为“相对”。 将.grid背景设置为显示：table；，高度和宽度 100%和绝对位置。 然后将以下INF样式添加到标题：

.grid-background header{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

---

谢谢，阿迪！但这只是水平的好的，在Firefox和Chrome中运行。但是Safari忽略了垂直对齐：中间对齐。有什么建议吗？

.grid-background header{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}