相对于两个容器之一对齐中心

Question

我有一个高度为 100vh 的容器，以便拉伸整个屏幕。在里面我有一个 h1 和一个 div，即两个容器。现在，div 中的内容是我想要在页面上居中对齐的内容，但由于我的 h1 我不能。

所以基本上设置是：

HTML:

<div class="main-container">
    <h1>This is a headline</h1>
    <div class="content-container">
         <p>Different stuff in here</p>
    </div>
</div>

而 CSS 可能看起来像：

.main-container {
    display: grid;
    height: 100vh;
    align-content: center;
    justify-content: center;
}

同样，这将导致两个元素 h1 和 content-container 居中。但是我想做的是相对于 main-container 居中，所以它总是在中间，而 h1 总是在上面一些像素。将 h1 标签放入 main-container 并使其成为绝对标签是唯一的选择吗？

Answer 1

正确。 h1 应该是绝对位置。因此，最佳做法是将 h1 移动到 content-container 内，这样您就可以根据 content-container.

调整 h1 的位置

Answer 2

您可以使用 position: absolute，或者您可以执行一些转换翻译属性例如 transform: translateY(20px)

相对于两个容器之一对齐中心

Align center with respect to one of two containers

css

alignment