如何居中预加载器(移动)?
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;
}
尝试了很多不同的解决方案,但由于某种原因无法在移动设备上将我的预加载器居中。它在桌面/移动横向上很好,但每当我在移动纵向上....它不居中。
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;
}