将文本放置在画廊的中间，以便响应

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将该元素视为弹性框
• 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应该足够。