html如何让弹窗居中,CSS弹窗居中的实现⽅法html怎么让所有内容居中
下⾯为⼤家带来⼀篇弹窗居中的简单实现⽅法。内容挺不错的，现在就分享给⼤家，也给⼤家做个参考。
最近做页⾯的时候经常会遇到弹出框居中的问题，
请教了⼀下⾝边的⼤⽜，终于弄出来了，
实现的原理：
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;
}
全部代码:
弹窗居中
.outbox:before{ content:"";
width:0;
height:100%;
display:inline-block; vertical-align:middle;
}
.
outbox{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
}
.content{
width:200px;
height:200px; background-color:#ccc; display:inline-block; vertical-align:middle;
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，更多相关内容请关注PHP中⽂⽹！相关推荐：
利⽤CSS3来匹配横屏竖屏的⽅法
CSS的table-layout属性的⽤法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。