css - 由于可能的育儿问题导致布局中断？

Question

我有点被这个破坏我的布局的小问题困住了。在主页上，我有一个蓝色框作为我的主要容器。在我的主容器中，屏幕右侧还有两个框，其中包含联系信息。在标题容器中还有一个 H2，上面写着 -- “满意度是我们的最强点”

那怎么了？好吧，atm 看起来没什么问题，但如果想将 H2“满意度是我们最强的点”准确居中，在它的标题容器(浅蓝色大矩形)内怎么办？所以我写这个 CSS 来尝试准确地将标题容器中的文本居中

%align {
position: relative;
top: 50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

屏住呼吸，砰的一声…… 我的整个布局都坏了……我认为这是由于 H2 的育儿问题。在我的 HTML 中，我将 h2 类插入到大 8 列的 div 类下方，在这种情况下，它不是正确的父级(将文本居中)。我想将文本居中的元素是 headline-container (浅蓝色框)。简单地说——一旦我将 h2 的父级更改为标题容器并添加上面的样式，我的布局似乎就会中断。

这是HTML

<div class="headline-container">
        <div class="row">
            <div class="large-8 columns">
        <h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
            </div>

            <div id="contact-info" class="large-4 columns">
                <div class="phone-box">
                    <div class="number">
                        <a id="phone-number" href="tel:808-848-8821">808-848-8821</a>
                    </div>
                </div>

                <div class="email">
                    <div class="email-box"><a id="email-contact" href="mailto:etoile@hawaii.rr.com">etoile@hawaii.rr.com</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

我使用了一种暂时不太准确的方法，通过将此填充应用于文本来使我的 H2 居中。它看起来不错，但内心深处有一些东西告诉我它不是 100% 准确的，这让我很困扰。关于为什么我的布局被破坏有什么建议吗？

padding-top: 40px;

这是链接 http://kapena.github.io/pp_web/

感谢阅读，期待您的建议和意见。

Answer 1

为 h2 的容器 (div.columns) 设置固定高度可以解决这个问题。

示例

<div class="large-8 columns">
    <h2 class="satisfaction">Satisfaction is,</br>Our Strongest Point</h2>
</div>

CSS

.columns {
    height: 218px;
}

.satisfaction {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}