最近做頁面的時候經常會遇到彈出框置中的問題，
請教了一下身邊的大牛，終於弄出來了，
實現的原理：
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; }
全部代碼:
<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>彈窗置中</title> <style type="text/css"> .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; } </style> </head> <body> <p class="outbox"> <p class="content"> </p> </p> <body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
