让div盒子相对父盒子垂直居中的几种方法

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <style>
 7 
 8  #one{
 9         width: 400px;
10         height: 400px;
11         border: 1px solid #000;
12         position: relative; 
13     }
14 #two{
15     width: 200px;
16     height: 200px;
17     background-color: red;
18     position: absolute;
19     top: 50%;
20     left: 50%;
21     margin-left: -100px;
22     margin-top: -100px;
23 
24 }
25 </style>
26 <body>
27 <div id="one">
28     <div id="two"></div>
29 </div>
30 </body>
31 </html>

 1 <html>
 2 <head lang="en">
 3     <meta charset="UTF-8">
 4     <title></title>
 5 </head>
 6 <style>
 7   #one{
 8         width: 400px;
 9         height: 400px;
10         border: 1px solid #000;
11         position: relative;
12     }
13  
14     #two{
15         width: 200px;
16         height: 200px;
17         background-color: red;
18         position: absolute;
19         margin: auto;
20         top: 0;
21         left: 0;
22         right: 0;
23         bottom: 0;
24     }
25   img {
26          display:table-cell;
27          text-align:center;
28          vertical-align:middle;
29  }
30 </style>
31 <body>
32 <div id="one">
33     <div id="two"></div>
34     <img src="" alt=""/>
35 </div>
36 </body>
37 </html>

posted @ 2016-11-30 11:22  曦雨幽兰  阅读(5860)  评论(0编辑  收藏  举报