在视差中心显示 div 的问题答案

【问题标题】：Issues displaying div in center of parallax在视差中心显示 div 的问题
【发布时间】：2020-03-04 23:46:37
【问题描述】：

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

我目前的代码设置如下：

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

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

【问题讨论】：

.center-item 从未使用过，使用 flexbox 也非常适合执行这种类型的样式，但您需要正确使用它才能工作。因此，diplay:flex 在孩子上不会为孩子设置样式，而是为孩子的孩子设置样式。您应该将 flexbox 样式从 .center-item 添加到 .parralax
太棒了，添加 display: flex 到视差已经奏效了！！
是的，可能是因为您将 flexbox 样式添加到子项，而不是父项

标签： css twitter-bootstrap vue.js

【解决方案1】：

这是css：

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

【讨论】：