弹窗居中的简单实现方法

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含弹窗,居中等相关知识,佚名希望在学习及工作中可以帮助到您

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

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

实现的原理：

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

2,外围盒子定义fixed属性

3,定义内容盒子。

定义外围盒子：

outbox{
position:fixed;
top:0;
rightright:0;
bottombottom:0;
left:0;
display:block;
text-align:center;
}

定义外围盒子伪类：

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

定义内容盒子：

contentbox{
display:inline-block;
vertical-align:middle;
text-align:center;
}

全部代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>弹窗居中</title>
<style type="text/css">
.outbox:before{
content:"";
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.outbox{
position:fixed;
top:0;
right:0;
bottom:0;

您可能想查找下面的文章:

相关文章

2017-08-06CSS中将Span标签设置为固定宽度的方法
2017-08-06background和background-Color的区别介绍
2017-08-14纯css 制作音谱跳动效果
2017-08-06div+css打造可变高宽的圆角框
2017-08-06兼容浏览器的css网页细线表格设计
2017-08-06CSS3简单实现照片墙
2017-08-06浏览器地址栏中显示自定义小图标
2017-08-06浅谈css命名规则(新手必看)
2017-08-06不同CSS布局实现与文字鼠标选择的可用性
2017-08-06一个全屏的加载动画效果实现