码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-30 14:07:39      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:http   htm   position   isp   技术   auto   bottom   har   display   

 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>

技术分享

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

标签:http   htm   position   isp   技术   auto   bottom   har   display   

原文地址:http://www.cnblogs.com/xiaoxie2016/p/6116975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!