如何在横幅图片中居中页面标题？

Question

我有一个由带有大横幅图片的页面组成的网站。默认情况下，该模板将页面标题放置在这些横幅中，但使标题在垂直方向上不居中。为了解决这个问题，我使用了 translateY 调整将每个垂直居中放置在各自的横幅中。这是下面的代码：

HTML IDs: #page-title, #page-description

#page-title, #page-description { transform: translateY(...px); }

这按预期工作。但是，似乎每个标题都需要不同的 px 值来居中。此外，此解决方案会根据屏幕尺寸产生不同的效果； 60px 在桌面上的影响比在移动设备上小得多，等等。这会在便携式设备上造成一些设计上的不一致。因此，这样做似乎sub-optimal。

是否有更通用的解决方案我可以将这些标题垂直居中，而不需要针对每个显示尺寸进行调整？我不再使用填充，"vertical-align: middle" 似乎不起作用。

我的网站：www.tylercharboneauprofessional.com

Answer 1

您可以像这样使用转换翻译的百分比值：

transform: translateY(50%);

或者您可以使用 display:flex 水平和垂直居中：

#page-title, #page-description { 
  display: flex;
  align-items: center;
  justify-content: center;
}

两者的旁注：您的标题容器确实需要具有横幅的完整高度，否则框的中心将无法正确设置。之后，您可能需要补偿导航的高度，使可见部分看起来以 margin-top:45px 为中心；例如。

一般来说，您不仅需要对#page-title 进行一些细微的修改，还需要对#banner-area 进行一些细微的修改。当前横幅的构建方式真的可以重新审视，老实说，一切都是如何组合在一起的。

如有其他问题，欢迎随时提问！

How to center page title within banner image?