Html 加载页面时，将所有移动设备的图像居中

加载页面时，我正在尝试将所有移动设备的图像居中。我正在使用scss。这是我的代码：

.page-is-changing {
    .cd-logo {
        position: fixed;
        z-index: 4;
        background: url($image-base-path+"/common/logo.svg") no-repeat;
        top: 40%;
        animation: animatezoom 0.8s;
        left: calc(50% - 5.6rem);
        width: 11.3rem;
        height: 10%;
    }

    @media screen and (max-width: 780px) {
        .cd-logo {
            position: fixed;
            z-index: 4;
            margin: 0;
            background: url($image-base-path+"/common/logo-small.svg") no-repeat;
            top: 40%;
            left: 50%;
            width: 11.3rem;
            height: 10%;
        }
    }
}

但问题是，该徽标在web应用程序中还可以使用，但在浏览器移动设备中却无法使用

你能帮我解决这个问题吗，我们的SCS我不能把保证金=自动

.页面正在更改{ 高度：100vh； 宽度：100%； 显示器：flex； 证明内容：中心； 对齐项目：居中； } @媒体屏幕和最大宽度：780px{ .page正在更改img{ 宽度：80%； } }

---

我强烈建议您使用flexbox进行定心。它现在得到了很好的支持，大大简化了垂直定心

下面是要查看的片段：

.集装箱{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 高度：100vh； 宽度：100vw； } .标志{ 宽度：5em； 身高：5公分； 背景颜色：蓝色； }

---

这回答了你的问题吗？从这个重复中我最喜欢这个答案