如何居中预加载器(移动)?

How To Center Pre-Loader (Mobile)?

尝试了很多不同的解决方案,但由于某种原因无法在移动设备上将我的预加载器居中。它在桌面/移动横向上很好,但每当我在移动纵向上....它不居中。

CSS:

    .load-screen{
    background-color: white;
    opacity: 1;
    position: fixed;
    margin-left: auto;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    transition: 0.4s ease-in;
}

.loading-image{
    display: block;
    width: 100%;
    margin-top: 15vw;
    margin-left: auto;
    animation-name: loadscreen;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    align-items: center;
    justify-content: center;
    text-align: center;

}

截图: Mobile Screenshot

使用display:flex 将使其中的任何内容成为弹性项目。 justify-content: center 将使项目从左到右居中 对齐项目:居中将使项目从上到下居中。

参见Fiddle:http://jsfiddle.net/fm3xvzc8/

.load-screen{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 1;
    position: fixed;
    margin-left: auto;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    transition: 0.4s ease-in;
}

.loading-image{
    display: block;
    width: 100%;
    // margin-top: 15vw; The margins aren't necessary
    // margin-left: auto; The margins aren't necessary
    animation-name: loadscreen;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;

}