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

This question already has answers here:

How to center absolutely positioned element in div?
                                
                                    （33个答案）
                                
                        
                        
                            Center a DIV horizontally and vertically [duplicate]
                                
                                    （7个答案）
                                
                        
                                2个月前关闭。
            
                    
我正在尝试在页面加载时为所有移动设备集中图像。我正在使用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应用程序来说是可以接受的，但在浏览器移动设备中并不能成为中心。

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

最佳答案

我强烈建议您使用flexbox居中。现在得到了很好的支持，并大大简化了垂直居中。

以下是要查看的摘录：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.logo {
  width: 5em;
  height: 5em;
  background-color: blue;
}

<div class="container">
  <div class="logo" />
</div>

关于html - 页面加载时将所有移动设备的图像居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58842981/