基于vertical-align属性的水平垂直居中弹框

总结留到最后，先上板栗

结构和样式

<div class="container" style="display:none">
 	<div class="dialog">
 		<span class="close">X</span>
 		<p>梦想是要有的，万一实现了呢</p>
 	</div>
 </div>
 
 <button>我是按钮</button>

.container{
	  	position:fixed;
	  	left:0;
	  	top:0;
	  	bottom:0;
	  	right:0;
	  	background-color:rgba(0,0,0,.5);
	  	text-align:center;/*水平居中*/
	  	font-size:0;
	  	white-space:nowrap;
	  	overflow:auto;
	  }
      .container:after{/*此处就相当于添加了一个幽灵空白节点，让内联元素垂直居中对齐*/
      	display:inline-block;
      	content:'';
      	height:100%;
      	vertical-align:middle;/*垂直居中*/
      }
      .dialog{
      	display:inline-block;
      	vertical-align:middle;/*实现垂直居中*/
     	text-align:left;/*因为after伪元素没有内容，仅仅是一个空白节点，又通过继承了container的text-align：center实现了水平居中，此处设置text-align:left;就相当于紧贴着空白节点的右边，而空白节点无内容，从而实现水平居中*/
      	font-size:14px;
      	white-space:normal;
      }
      .close{
      	position:absolute;
      	display:block;
      	top:20px;
      	right:20px;
      	width:20px;
      	height:20px;
      	text-align:center;
      	background:rgba(255,255,255,.3);
      }
       

js部分：控制弹框的显示和隐藏

window.οnlοad=function(){
		var container=document.querySelector('.container');
		var button=document.querySelector('button');
		var close=document.querySelector('.close');
         
		if(container && button){
			button.οnclick=function(){
				container.style.display="block"
			}
		}
		if(container && close){
			close.οnclick=function(){
				container.style.display="none";
			}
		}
	}

实现的效果是这样的

此方法的优点：

1.节省了很多定位的javascript代码，也不需要浏览器的resize事件之类的处理，当弹框内容动态变化时，也无需重新定位

2.可以非常灵活控制垂直居中的比例，比如设置

.container:after{

 height:80%}则弹框就不是垂直居中

3.容器设置overflow:auto可以实现弹框高度超过一屏时依然能看见屏幕外的内容