如何在父横幅图像中垂直居中页面标题文本？

Question

我的网站的每个页面都有一个页面标题，默认情况下放置在该页面的横幅图像中。我已经制定了以这些页面标题为中心的解决方案，但是页面之间的代码实现不一致。最大的问题是以移动为中心，从一个页面到另一个页面，事情可能会有点不稳定。我之前使用此规则将文本居中，但它会导致基于设备屏幕宽度的不一致：

@media screen and (max-width: 769px) { #banner-area { padding-top: 85px; }}

实际上，这将内容推送到手机屏幕尺寸上的正确位置。但是，它似乎有点“hacky”和不优雅。后来我转向 translateY 属性，并设置此代码以垂直居中文本：

/* Page 1 */

@media screen and (max-width: 769px) { #page-title { transform: translateY(-30px); }} 
@media screen and (min-width: 770px) { #page-title { transform: translateY(10px); }} 

/* Pages 2 through 7 */

#page-title { transform: translateY(50%); } /* or below... */
@media screen and (min-width: 770px) { #page-title { transform: translateY(50%); }}

对应的HTML：

<div id="banner-area">
   <div id="page-title">

这是编写此垂直居中 CSS 规则的正确方法，还是其他人可以提供更好的解决方案？让我感到困扰的是，第 1 页有自己的一套规则，其余的在实现居中效果方面或多或少是相同的。可以让我摆脱横幅区域填充黑客的东西会很棒 - 我需要一个适用于多种设备屏幕尺寸的通用规则。

Answer 1

您的问题有点模糊，如果没有适当的 html 和 css，我们无法为您提供您可能想要的答案。但是，如果我理解正确，这就是您所追求的：

#page-title {
   margin-top: 50%;
   transform: translateY(-50%);
}

或

parent {
    position: relative;
}

#page-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

使用转换时，% 指的是 div 的大小，而不是父级的大小。

您也可以在父元素上使用 flexbox：

parent {
   display: flex;
   align-itens: center; // Vertical
   justify-content: center; // Horizontal
}

再一次，如果没有上下文，很难说这些中的哪一个是最好的解决方案，如果有的话。

Answer 2

您可以按照以下步骤操作： HTML：

<div class="page-title">
  <h2>Page Title</h2>
</div>

CSS：

.page-title{
  display: flex;
  align-items:center;
  background-color: #fafafa;
  height: 300px;
}