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

最新推荐文章于 2023-11-05 23:47:24 发布

caimaomaocai

最新推荐文章于 2023-11-05 23:47:24 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/caimaomaocai/article/details/79862718

本文介绍了一种使用CSS和JavaScript实现对话框居中的方法，包括如何使对话框内容随窗口大小变化而调整位置，同时提供了简洁的JavaScript代码用于控制对话框的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结留到最后，先上板栗

结构和样式

<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.onload=function(){
		var container=document.querySelector('.container');
		var button=document.querySelector('button');
		var close=document.querySelector('.close');
         
		if(container && button){
			button.onclick=function(){
				container.style.display="block"
			}
		}
		if(container && close){
			close.onclick=function(){
				container.style.display="none";
			}
		}
	}

实现的效果是这样的