移动端实现水平垂直居中的整个页面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>
复制代码
|
|