弹窗居中的简单如何实现方法

网络
云朵，像一只洁白的兔子，像仙女的纱带，还像一张张可爱的笑脸。盛开的荷花像个妙龄少女，清透出尘；像舞动的仙子，娇艳欲滴；像个刚出生的孩子，一尘不染。

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

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

实现的原理：

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. <!doctypehtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <metaname="viewport"content="width=device-width,initial-scale=1">
  6. <title>弹窗居中</title>
  7. <styletype="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>
  34. <divclass="outbox">
  35. <divclass="content">
  37. </div>
  38. </div>
  39. <body>
  40. </html>

以上这篇弹窗居中的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例