Flexbox制作CSS布局实现水平垂直居中的简单实例

Flexbox实现一个div元素在body页面中水平垂直居中：

1.   
2.   
3.   
4.     
5.     
6.     
7.     html {   
8.       height: 100%;   
9.     }    
10.   
11.     body {   
12.       display: -webkit-box;     
13.       display: -moz-box;        
14.       display: -ms-flexbox;     
15.       display: -webkit-flex;     
16.       display: flex;          
17.   
18.            
19.          
20.       -webkit-box-align: center;    
21.       -moz-box-align: center;   
22.          
23.       -ms-flex-align: center;    
24.          
25.       -webkit-align-items: center;   
26.       align-items: center;   
27.   
28.          
29.          
30.       -webkit-box-pack: center;    
31.       -moz-box-pack: center;    
32.          
33.       -ms-flex-pack: center;    
34.          
35.       -webkit-justify-content: center;   
36.       justify-content: center;   
37.   
38.       margin: 0;   
39.       height: 100%;   
40.       width: 100%    
41.     }    
42.        
43.     .box {   
44.       display: -webkit-box;    
45.       display: -moz-box;   
46.       display: -ms-flexbox;   
47.       display: -webkit-flex;   
48.       display: flex;   
49.       -webkit-box-align: center;    
50.       -moz-box-align: center;   
51.       -ms-flex-align: center;   
52.       -webkit-align-items: center;   
53.       align-items: center;   
54.       width:500px;   
55.       height: 200px;   
56.       background: red;   
57.       color: #fff;   
58.       font-weight: bold;   
59.       font-size: 30px;   
60.     }    
61.     
62.   
63.   
64.   Flexbox制作CSS布局实现水平垂直居中