弹窗垂直居中的简易完成方式

日期:2020-09-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

近期做网页页面的情况下常常会遇到弹出框垂直居中的难题,

求教了1下身旁的大牛,终究弄出来了,

完成的基本原理:

1,给外围盒子界定1个伪类:before  

2,外围盒子界定fixed特性

3,界定內容盒子。

 

界定外围盒子:

CSS Code拷贝內容到剪贴板
  1. outbox{   
  2.    position:fixed;   
  3.    top:0;   
  4.    rightright:0;   
  5.    bottombottom:0;   
  6.    left:0;   
  7.    display:block;   
  8.    text-align:center;   
  9. }  

界定外围盒子伪类:

CSS Code拷贝內容到剪贴板
  1. outbox:before{   
  2.    content="";   
  3.    width:0;   
  4.    height:100%;   
  5.    display:inline-block;   
  6.    vertical-align:middle;   
  7. }  

界定內容盒子:

CSS Code拷贝內容到剪贴板
  1. contentbox{   
  2.     display:inline-block;   
  3.     vertical-align:middle;   
  4.     text-align:center;   
  5.  }  

所有编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf⑻">  
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">  
  6.         <title>弹窗垂直居中</title>  
  7.         <style type="text/css">  
  8.             .outbox:before{   
  9.                 content:"";   
  10.                 width:0;   
  11.                 height:100%;   
  12.                 display:inline-block;   
  13.                 vertical-align:middle;   
  14.             }   
  15.             .outbox{   
  16.                 position:fixed;   
  17.                 top:0;   
  18.                 right:0;   
  19.                 bottom:0;   
  20.                 left:0;   
  21.                 text-align:center;   
  22.             }   
  23.             .content{   
  24.                 width:200px;   
  25.                 height:200px;   
  26.                 background-color:#ccc;   
  27.                 display:inline-block;   
  28.                 vertical-align:middle;   
  29.             }   
  30.         </style>  
  31.     </head>  
  32.     <body>  
  33.        
  34.     <div class="outbox">  
  35.         <div class="content">  
  36.                
  37.         </div>  
  38.     </div>  
  39.     <body>  
  40. </html>  

以上这篇弹窗垂直居中的简易完成方式便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/White-Quality/p/4530867.html