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

Posted 2020-08-21 曦雨幽兰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让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>

以上是关于让div盒子相对父盒子垂直居中的几种方法的主要内容，如果未能解决你的问题，请参考以下文章