CSS 实现垂直居中的几种方法(必看)

效果：

•分析

•优点：content 高度可以动态改变，无须担心父级容器高度不够被截断；

•缺点：IE8 还没搞定。　　

•方式二：布局对象固定高度

1.   
2.   
3.   
4.        
5.        
6.   
7.   
8.        
9.         .container{   
10.             width: 200px;   
11.             height: 200px;   
12.             background-color: #003366;   
13.             position: relative;   
14.             text-align: center;   
15.             display: table;   
16.         }   
17.         .content{   
18.             width:100px;   
19.             height: 100px;   
20.             background-color: yellow;   
21.             position: absolute;   
22.             top:50%;   
23.             margin-top: -50px;   
24. 　　　　     left:50%;   
25. 　　        margin-left:-50px;     
26.         }   
27.         .point{   
28.             width:50px;   
29.             height: 50px;   
30.             position: absolute;   
31.             top: 50%;   
32.             margin-top: -25px;   
33.             left:50%;   
34.             margin-left:-50px;   
35.             background-color: green;   
36.         }   
37.   
38.        
39.   
40.     "container">   
41.         "content">   
42.             "point">   
43.                 point goes here.   
44.                
45.            
46.        
47.   
48.   

•就这样，我们实现了垂直和水平的居中

上面提到的方法，都有局限性，下面介绍一种通用的方法，不过是 CSS3实现的，但是通用。

1.   
2.   
3.   
4.       
5.       
6.   
7.       
8.   
9.   
10.