css - 在视差中心显示 div 的问题

Question

我有一个视差组件，我试图在图像中间显示文本。水平对齐很好，但我无法垂直对齐。

我目前的代码设置如下:

<template>
<div id="app">

    <div class="parallax">
        <div class="d-flex justify-content-center">
            <h3 class="mt-5">Center this div</h3>
        </div>
    </div>

</div>
</template>

这是我的视差 scss 文件中的代码

.parallax {
    /* The image used */
    /* Set a specific height */
    height: 750px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

如上所示，我已经尝试了一些使用 Bootstrap 的方法，以及可以在下面看到的更进一步的“居中”类。

.center-item {
    display: flex; 
    align-items: center;  /*Aligns vertically center */
    justify-content: center; /*Aligns horizontally center */
    width: 50%;
    margin: 0 auto;

}

    <div class="parallax">
        <div class="d-flex justify-content-center">
            <h3 class="center-item">Center this div</h3>
        </div>
    </div>

将标记显示在视差组件中心的最佳方式是什么？不仅仅是在顶部居中。

Answer 1

这是CSS:

.parallax {
    position: relative;
}
.mt-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0;
    margin-top: 0;
}