垂直居中实用三种方式 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style>
 8             /*第一种方法*/
 9             /*.parent {
10                 width: 800px;
11                 height: 500px;
12                 border: 2px solid #000;
13                 position: relative;
14             }
15             
16             .child {
17                 width: 200px;
18                 height: 200px;
19                 margin: auto;
20                 position: absolute;
21                 top: 0;
22                 left: 0;
23                 bottom: 0;
24                 right: 0;
25                 background-color: red;
26             }*/
27             /*第二种方法*/
28             /*.parent {
29             width:800px;
30             height:500px;
31             border:2px solid #000;
32             display:table-cell;
33             vertical-align:middle;
34             text-align: center;
35         }
36         .child {
37             width:200px;
38             height:200px;
39             display:inline-block;
40             background-color: red;
41         }*/
42             /*第三种方法*/
43             
44             .parent {
45                 width: 800px;
46                 height: 500px;
47                 border: 2px solid #000;
48                 display: flex;
49                 justify-content: center;
50                 align-items: center;
51             }
52             
53             .child {
54                 width: 200px;
55                 height: 200px;
56                 background-color: red;
57             }
58             /*第四种方法*/
59             /*.parent {
60             width:800px;
61             height:500px;
62             border:2px solid #000;
63             position:relative;
64         }
65         .child {
66             width:300px;
67             height:200px;
68             margin:auto;
69             position:absolute;/*设定水平和垂直偏移父元素的50%，*/
70             
71             再根据实际长度将子元素上左挪回一半大小*/
72             /* left:50%;
73             top:50%;
74             margin-left: -150px;
75             background-color: red;
76         }*/
77         </style>
78     </head>
79 
80     <body>
81         <div class="parent">
82             <img class="child" src="img/cloud_07.png">
83 
84             </img>
85 
86         </div>
87     </body>
88 
89 </html>

 

posted @ 2016-08-30 15:09  Dylan(迪伦)  阅读(216)  评论(0)    收藏  举报