H5对话框水平垂直居中

最新推荐文章于 2023-07-13 10:33:36 发布

徐同保

最新推荐文章于 2023-07-13 10:33:36 发布

阅读量2.1k

点赞数 1

分类专栏： web前端前端技术分享文章标签： H5 对话框

本文链接：https://blog.csdn.net/xutongbao/article/details/78921489

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

使用transform：

<!DOCTYPE html>        
<html lang="en">        
<head>        
    <meta charset="UTF-8">        
    <title>H5对话框水平垂直居中</title>      
    <style type="text/css">    
      .app-pop {display:none;position: fixed;width: 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}  
      .app-pop-inner {position:absolute;left:50%;top:50%;width: 328px;height:380px;border-radius: 6px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);background: green;}  
    </style>       
</head>        
<body>  
<button id="btn">打开对话框</button>  
  
<div id="pop" class="app-pop">  
  <div class="app-pop-inner"></div>  
</div>    
  
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  
<script type="text/javascript">  
  $('#btn').on('click', function() {  
    $('#pop').css({display:'block'});  
  });  
</script>  
</body>        
</html>

使用margin：

    <!DOCTYPE html>          
    <html lang="en">          
    <head>          
        <meta charset="UTF-8">          
        <title>H5对话框水平垂直居中</title>        
        <style type="text/css">      
          .app-pop {display:none;position: fixed;width: 100%;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.3);overflow: auto;}    
          .app-pop-inner {position:absolute;top: 0; bottom: 0;left: 0;right: 0;margin: auto; width: 328px;height:380px;border-radius: 6px;background: green;}
        </style>         
    </head>          
    <body>    
    <button id="btn">打开对话框</button>    
        
    <div id="pop" class="app-pop">    
      <div class="app-pop-inner"></div>    
    </div>      
        
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    
    <script type="text/javascript">    
      $('#btn').on('click', function() {    
        $('#pop').css({display:'block'});    
      });    
    </script>    
    </body>          
    </html>

使用display：flex

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
<title>H5对话框水平垂直居中</title> 
<style type="text/css">
.app-pop {color: #ffffff;width: 100%;height: 0;position: absolute;overflow: hidden;top: 0;left: 0px;display: flex;display: -webkit-flex;align-items: center;justify-content: center;}
.app-pop-inner {width: 328px;height:380px;border-radius: 6px;background: green;}
</style> 
</head>  
<body>    
<button id="btn">打开对话框</button>     
<div id="pop" class="app-pop">    
  <div class="app-pop-inner"></div>    
</div>      
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
<script>
$('#btn').on('click', function() {    
  $('#pop').css({height:'100%'});    
});    
</script>
</body>  
</html>

备注：欢迎加入web前端求职招聘qq群：668352707

徐同保

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5对话框水平垂直居中

使用transform：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;H5对话框水平垂直居中&lt;/title&gt;
复制链接

扫一扫