时间戳

首页 > 解决方案 > 页面中间的 CSS 中心图像动画

css - 页面中间的 CSS 中心图像动画

问题描述

我有以下代码将图像从底部转换到顶部，但我需要将其居中。在我的同事屏幕上，它居中，但在我的屏幕上，它更多地位于顶部。有没有办法确保它在所有屏幕上居中？（不会破坏我的 CSS 的其余部分，哈哈）

JS：

const showAlerts = () => {
  getElements().forEach((alert) => {
    focus-alert.style.display = "";
    focus-alert.style.bottom = "25%"; // <--- *This is what does the transition to the 'center'*
  });
};

HTML

    <div class="mobile-wrapper">
        <div id="mobile" class="focus-alert">
            <img src="assets/images/mobile-moments-away-img.png">
            <img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
            <img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png" onclick="handleGetQuotesClick(this)">
        </div>
    </div>

CSS：

.mobile-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/
}

#mobile {
    position: fixed;
    z-index: 9999;
    transition: all 1s ease;
}

如果我在我的屏幕上更改focus-alert.style.bottom = 25%为该20%中心，但显然不会为他。所以只是想知道如何使它在中间居中？

标签： csscss-transitionscenter

解决方案

您好，您可以尝试margin:50% auto 50% auto; 图像样式，将其添加到您的脚本中，这将帮助您将图像置于屏幕中间

推荐阅读