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;
}

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

2 个答案: