南粤风釆26选5开奖|26选526选5走势图|
知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、?#35745;?#32032;材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    移动端实现水平垂直居中的整个页面loading层

    作者:岁月歌者 2018-10-21 人气:
    移动端实现水平垂直居中的整个页面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层浮动到其他层上面,并?#39029;?#23544;和整个屏幕大小一样*/
     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?#35745;?#36824;是,css3动画,整个可以在增加?#35745;?#25110;者css3动画进去</p>
    </div>
    
    <!--loading-->
    <div class="loading-box">
        <div class="loading">
            <img src="http://www.wxdmoh.tw/uploads/allimg/131207/1-13120F03048-50-lp.gif" alt="">
            <p>Loading...</p>
        </div>
    </div>
    </body>
    </html>

    演示截图

    移动端实现水平垂直居中的整个页面loading层

    ↓ 查看全文

    移动端实现水平垂直居中的整个页面loading层由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    移动端实现水平垂直居中的整个页面loading层-最新评论

    南粤风釆26选5开奖
    买股票指数期货 2012上证指数数据 a股指数和上证指数 股票配资骗局怎么报案 2018股票分析报告范文 股票配资 牛市快讯每天推送 1991年上证指数 炒股入门视频 炒股手机推荐 股票跌停