将文本定位在画廊的中间，使其响应

Question

如何将标题置于画廊顶部，如下图所示。

我正在使用我的主题附带的画廊简码。

我可以使用 position:absolute 做到这一点；以及最高值和最低值，然后用 display:block 居中；和 margin:0 自动；。但是，当我更改屏幕大小时，一切都变得不正常了。

html 是

<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>

Answer 1

保持元素水平和垂直居中的最简单方法是 flexbox.

您在父元素上所需要的是：

• display: flex 将元素视为 flexbox
• align-items: center 垂直对齐
• justify-content: center 用于水平对齐
• 固定 height（创建填充）- 100vh 全屏

这可以在下面看到：

body {
  margin: 0;
}

.gallery-column {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<div class="gallery-column">
  <div class="centered">
    <h2>Centered Element</h2>
  </div>
</div>

无论屏幕大小如何调整，相关元素都将保留在页面的正中央。

在您的情况下，您还需要 z-index 以确保该元素位于顶部。
z-index: 1 应该足够了。