移动端实现水平垂直居中的整个页面loading层
作者：岁月歌者 2018-10-21 人气：3678 QQ交流群:4188479移动端实现水平垂直居中的整个页面loading层，因为是移动端，所以采用flex布局，目前来说，基本上手机浏览器和微信浏览器都对flex支持良好了，这个水平垂直居中实现方法放到微信小程序中一样可以。采用flex布局，loading-box中的内容 水平居中，loading-box中的内容 垂直居中
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>移动端实现水平垂直居中的整个页面loading层</title>
<style>
html,body{ padding: 0; margin: 0;}
.loading-box{
position: fixed; left: 0;right: 0;top: 0;bottom: 0; /*使得loading层浮动到其他层上面，并且尺寸和整个屏幕大小一样*/
z-index: 10; /*给个 z-index 覆盖到主题内容上面*/
background: #fff; /*遮挡后面的内容*/
display: flex; /*采用flex布局*/
justify-content:center; /*loading-box中的内容 水平居中*/
align-items: center; /*loading-box中的内容 垂直居中*/
}
.loading{
text-align: center; /*文本水平居中*/
}
</style>
</head>
<body>
<div class="main">
<p>测试内容，懒人建站</p>
<p>这里主要是布局，至于loading你使用一张loading gif图片还是，css3动画，整个可以在增加图片或者css3动画进去</p>
</div>
<!--loading-->
<div class="loading-box">
<div class="loading">
<img src="http://www.51xuediannao.com/uploads/allimg/131207/1-13120F03048-50-lp.gif" alt="">
<p>Loading...</p>
</div>
</div>
</body>
</html>演示截图
↓ 查看全文
移动端实现水平垂直居中的整个页面loading层由懒人建站收集整理，您可以自由传播，请主动带上本文链接
懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
- 上一篇：响应式Web设计教程（HTML5和CSS3实战）PDF文字版百度网盘网盘下载
- 下一篇：没有了
移动端实现水平垂直居中的整个页面loading层-最新评论