1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="utf-8 ">
5+ < meta name ="viewport " content ="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no ">
6+ < meta name ="apple-touch-fullscreen " content ="yes ">
7+ < meta name ="apple-mobile-web-app-capable " content ="yes ">
8+ < meta name ="full-screen " content ="yes ">
9+ < meta name ="format-detection " content ="telephone=no, address=no ">
10+ < meta name ="apple-mobile-web-app-status-bar-style " content ="black-translucent ">
11+ < meta http-equiv ="Expires " content ="-1 ">
12+ < meta http-equiv ="pragram " content ="no-cache ">
13+ < meta http-equiv ="Cache-Control " content ="no-cache,must-revalidate ">
14+ < title > 垂直水平居中</ title >
15+ < style type ="text/css ">
16+ html {
17+ height : 100% ;
18+ font-size : 16px ;
19+ }
20+ body {
21+ height : 100% ;
22+ font-size : 14px ;
23+ margin : 0 ;
24+
25+ }
26+
27+ .container {
28+ position : fixed;
29+ top : 0 ;
30+ left : 0 ;
31+ bottom : 0 ;
32+ right : 0 ;
33+ background : rgba (0 , 0 , 0 , 0.85 );
34+ z-index : 3 ;
35+ }
36+
37+ .box {
38+ display : table;
39+ height : auto;
40+ /*height: 50%;*/
41+ /* Set your own height: percents, ems, whatever! */
42+ width : 50% ;
43+ /* Set your own width: percents, ems, whatever! */
44+ overflow : auto;
45+ /* Recommended in case content is larger than the container */
46+ margin : auto;
47+ /* Center the item vertically & horizontally */
48+ position : absolute;
49+ /* Break it out of the regular flow */
50+ top : 0 ;
51+ left : 0 ;
52+ bottom : 0 ;
53+ right : 0 ;
54+ /* Set the bounds in which to center it, relative to its parent/container */
55+ background : green;
56+ background : # 4fa46b ;
57+ color : # FFF ;
58+ padding : 20px ;
59+ border : solid 5px # 2e5f3e ;
60+
61+ }
62+
63+
64+ </ style >
65+ </ head >
66+ < body >
67+ < div class ="container ">
68+ < div class ="box "> aa</ div >
69+ </ div >
70+
71+ </ body >
72+ </ html >
0 commit comments