页面中间的 CSS 中心图像动画答案

【问题标题】：CSS center image animation in the middle of the page页面中间的 CSS 中心图像动画
【发布时间】：2021-03-28 02:48:23
【问题描述】：

我有以下代码将图像从底部转换到顶部，但我需要将其居中。在我的同事屏幕上，它居中，但在我的屏幕上，它更多地位于顶部。有没有办法确保它在所有屏幕上居中？（不会破坏我的 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%，它会在我的屏幕上居中，但显然不适合他。所以只是想知道如何使它在中间居中？

【问题讨论】：

标签： css css-transitions center

【解决方案1】：

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

【讨论】：

感谢您的帮助。它使图像过渡只是从底部到顶部，但它会离开屏幕
你能告诉我这个变量的用处focus-alert
它适用于我为移动和桌面定义的两个不同的 HTML 元素。