Css 由于可能的父级问题而导致布局中断？

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

那怎么了？看起来没什么问题，但如果想要准确地将H2“满意度是我们的强项”放在标题容器（浅蓝色的大矩形）的中心，该怎么办。所以我写这个CSS是为了在标题容器中准确地将文本居中

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

屏住呼吸，砰的一声。。 我的整个布局都中断了……我想这是因为H2的父母问题。在我的HTML中，我插入了h2类，该类位于div类下方，用于大8列，在本例中，它不是（将文本居中）的正确父级。我希望将文本居中的元素是标题容器（浅蓝色框）。简单地说，当我将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{text align:center}

或不使用

行{display:block；position:relative；margin:0 auto；width:100%；}

您不需要翻译

对h1元素尝试此操作

h2{
  display:inline-block;
  margin: 0 auto;
  }

---

为

h2

的容器（

div.columns

）设置固定高度可以解决此问题

示例

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

---

塞克斯·科林！你解决了这个问题！：）

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

.columns {
    height: 218px;
}

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