彈窗置中實現方式，彈窗置中實現

彈窗置中實現方式，彈窗置中實現

最近做頁面的時候經常會遇到彈出框置中的問題，

請教了一下身邊的大牛，終於弄出來了，

實現的原理：

1,給外圍盒子定義一個偽類:before  

2,外圍盒子定義fixed屬性

3,定義內容盒子。

 

定義外圍盒子：

1 outbox{2    position:fixed;3    top:0;4    right:0;5    bottom:0;6    left:0;7    display:block;8    text-align:center;9 }

定義外圍盒子偽類：

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

定義內容盒子：

1 contentbox{2    display:inline-block;3    vertical-align:middle;4    text-align:center;5 }