弹窗居中实现方式

2024-04-27 14:26:34

字体：大中小

来源：转载

供稿：网友

弹窗居中实现方式

最近做页面的时候经常会遇到弹出框居中的问题，

请教了一下身边的大牛，终于弄出来了，

实现的原理：

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

2,外围盒子定义fixed属性

3,定义内容盒子。

定义外围盒子：

1 outbox{2    position:fixed;3    top:0;4    right:0;5    bottom:0;6    left:0;7    display:block;8    text-align:center;9 }

定义外围盒子伪类：

outbox:before{   content="";   width:0;   height:100%;   display:inline-block;   vertical-align:middle;}

定义内容盒子：

1 contentbox{2    display:inline-block;3    vertical-align:middle;4    text-align:center;5 }

全部代码:

 1 <!doctype html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 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>

上一篇：模拟flexbox justify-content的space-between,space-around

下一篇：移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂