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

Posted 2020-10-31 小新没蜡笔哦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让div盒子相对父盒子垂直居中的几种方法相关的知识，希望对你有一定的参考价值。

方法1:宽度和高度已知的。 
思路： 
给父元素相对定位 
给子元素绝对定位 
left: 50%;top: 50%; 
margin-left: 负的宽度一半。 
margin-top: 负的高度一半；
<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>

方法2：宽度和高度自己未知 
意思就是说子盒子本身还是有宽度和高度的，只是自己未知。 
思路： 
给父盒子相对定位 
给子盒子绝对定位 
top、right、bottom、left全为0 
margin: auto;
<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="" />
35 </div>
36 </body>
37 </html>

方法3：flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 200px;
            background: #f99;
        }
        .box1{
            width: 200px;
            height: 100px;
            background: green;
        }
        .center{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box center">
        <div class="box1">

        </div>
    </div>
</body>
</html>

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