css超簡單實現div頁面居中 適合做彈出框

1.前言

現在項目中用到彈出框的話大部分都是直接用控制項的。不過有控制項雖方便，但有時候會有衝突的地方。我上次用layui的彈出框控制項，然後也用到了百度的編輯器uEditor，然後一切都好好的，結果編輯賦值不成功。我也不知道什麼問題。如果有知道原因的大神，求賜教！

所以說一旦有不兼容的彈出框，就自己畫了。畫多了，就習慣了。今天就分享一個方法【但是這個方法的原理我竟然琢磨不透！】

2.詳情

代碼是這樣的，一個div.point無寬高度，left:50%;top：50%;這樣的話，就會在頁面的正中間，然後div.pop設置了500px的寬高，居左，居上各-250px的距離。然後這個div.pop就會在頁面居中了；

然後效果圖是這樣的

我一直就是用這種方法做的彈出框。不過，實際應用中，最外層還得加一個div。然後這個div設置成100%寬高度，posiotn:fixed;left:0;top:0;這樣的話彈出框居中了，滑鼠也滾動不了。效果較真實一點；

實現效果如下：

這樣的話，一個居中的彈出框就實現了，在頁面的正中間。不過代碼實現了，原理不是特別懂，還希望各位對我進行指點一二，讓我能真正明白這個理！謝了。

3.總結

希望這種寫法能夠幫助到需要的小童鞋。文中的不足不要影響到大家，如果有錯誤的地方，請大家告之。

文章摘自博客園

更多精彩推薦

IT教育專業培訓：http://www.ujiuye.com/

IT職業在線教育：http://xue.ujiuye.com/

互聯網營銷集訓營：http://www.ujiuye.com/zt/zsjz/?wt.bd=lsw

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！