html - 在调整窗口大小时在引导程序中垂直和水平居中文本

Question

我希望有人可以帮助我解决我在引导程序中一直遇到的问题：根据窗口大小在主图像中居中元素。

例如，这是我一直在制作的 LP 的屏幕截图，其中文本或多或少地出现在我笔记本电脑屏幕的中心位置。

图像_OK

但是当我将它移动到更大的屏幕时，文本不会垂直居中（如下面的截图所示）

Image_not_OK

我认为这是由于我调用了一个类position: absoloute，它有一个position: absoloute. 但我试图将其更改为position: relative，它根本没有居中。

你能帮我找到正确的代码吗？

这是我在 HTML 中的代码：

<!--Main Hero Desktop-->
<div class="d-none d-lg-block desktopOnly">
    <div class="swiper-container swiper-desktop">
        <div class="swiper-wrapper">
            <a class="swiper-slide" href="#link#">
                <div class="row justify-content-center align-items-center text-center d-flex h-100">
                    <div class="col-12 col-md-6 h-50 position-absolute offer-text">
                        <div>
                            <p class="lead text-center pre-main-text">#main_pretitle#</p>
                            <h1 class="text-center main-title">#main_title_1#</h1>
                            <h1 class="text-center main-title-price">#main_title_price_1#</h1>
                            <p class="lead text-center vip-text">#main_vip#</p>
                            <p class="lead text-center sub-text">#main_subtitle_1#</p>
                            <span
                                class="btn text-center d-block d-xl-flex justify-content-xl-center align-items-xl-center newcta"
                                role="button">
                                #main_cta#
                            </span>
                        </div>
                    </div>
                </div>
                <img src="#cdn#D_Hero_Img.jpg">
            </a>
            <a class="swiper-slide" href="#link#">
                <div class="row justify-content-center align-items-center text-center d-flex h-100">
                    <div class="col-12 col-md-6 h-50 position-absolute offer-text-2">
                        <div>
                            <h1 class="text-center main-title-2">#main_title_2#</h1>
                            <p class="lead text-center vip-text-2">#main_vip#</p>
                            <p class="lead text-center sub-text">#main_subtitle_2#</p>
                            <span
                                class="btn text-center d-block d-xl-flex justify-content-xl-center align-items-xl-center newcta-2"
                                role="button">
                                #main_cta#
                            </span>
                        </div>
                    </div>
                </div>
                <img src="#cdn#D_Hero_Img_2.jpg">
            </a>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-desktop-next swiper-button-black"></div>
        <div class="swiper-button-prev swiper-desktop-prev swiper-button-black"></div>
    </div>
</div>

这是与之相关的CSS

.offer-text {
    top: 0.5vw;
}

.pre-main-text {
    text-transform: uppercase;
    font-size: 23px;
    margin-bottom: 10px;
}

.main-title {
    margin-bottom: -25px;
    font-size: 3.9em;
    font-family: Savoy-Roman;
    color: rgb(255, 255, 255);
}

.main-title-price {
    font-size: 10.4em;
    font-family: Savoy-Roman;
    color: rgb(255, 255, 255);
    margin-bottom: -27px;
}

.main-title-currency {
    font-size: 0.4em;
    font-family: Savoy-Roman;
    color: rgb(255, 255, 255);
    position: relative;
    top: -65px;
}

.vip-text {
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-size: 1.25em;
    letter-spacing: 3px;
    margin-bottom: -30px;
}

.sub-text {
    font-family: canada-type-gibson;
    text-transform: uppercase;
    font-size: 1.15em;
    margin-bottom: 2vw;
}

.newcta {
    background-color: var(--white);
    color: var(--black);
    padding: 20px 0px 20px 0px;
    width: 215px;
    height: 55px;
    margin: -10px auto 0;
    font-size: 16px;
    border-radius: 0rem;
}

.offer-text-2 {
    top: 8.5vw;
}

.main-title-2 {
    margin-bottom: 10px;
    font-size: 7.4em;
    font-family: Savoy-Roman;
    color: rgb(255, 255, 255);
}

.vip-text-2 {
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-size: 1.25em;
    letter-spacing: 3px;
    margin-bottom: 3px;
}

.newcta-2 {
    background-color: var(--white);
    color: var(--black);
    padding: 20px 0px 20px 0px;
    width: 215px;
    height: 55px;
    margin: 0px auto 0;
    font-size: 16px;
    border-radius: 0rem;
}

.newcta:hover, .newcta-2:hover {
    background-color: var(--black);
    color: var(--white);
    border: 0px;
}

如果您发现我应该更改任何其他内容以获得更清晰的代码，请告诉我，我愿意改进。

提前非常感谢你:)

标签： htmlcsstwitter-bootstrapbootstrap-4