首页 > 代码库 > 关于浮动元素垂直居中的问题

关于浮动元素垂直居中的问题

2024-08-22 10:23:26   220人阅读

两种浮动元素垂直居中的情况: 父盒子有宽高; 父盒子没有宽高
下面时 HTML 中的代码:
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>浮动元素垂直居中</title>
 6 </head>
 7 <body>
 8 <div class="parent">
 9     <div class="child"></div>
10 </div>
11 </body>
12 </html>


一. 父盒子有宽高:


垂直居中前代码实现 :




 1         .parent {
 2             width: 150px;
 3             height: 150px;
 4             background-color: teal;
 5             position: relative; /*注意父盒子要相对定位*/
 6         }
 7         .child {
 8             width: 50px;
 9             height: 50px;
10             background-color: violet;
11             float: left;
12        }    




垂直居中前效果图 :


技术分享


垂直居中代码实现 :




 1           .parent {
 2               width: 150px;
 3               height: 150px;
 4               background-color: teal;
 5               position: relative; /*注意父盒子要相对定位*/
 6 }
 7           .child {
 8               width: 50px;
 9               height: 50px;
10              background-color: violet;
11              float: left;
12 13              position: absolute;
14              top: 50%;  /*容器的一半*/
15              left: 50%;
16              margin-top: -25px;  /*子盒子高度的一半*/
17              margin-left: -25px;  /*子盒子宽度的一半*/
18 }




垂直居中效果图 :


 技术分享



二. 父盒子没有宽高:




 1         .parent {
 2             background-color: limegreen;
 3             position: relative;
 4         }
 5         .child {
 6             width: 50px;
 7             height: 50px;
 8             background-color: khaki;
 9             float: left;
10             margin: auto;
11 
12             position: absolute;
13             top: 0;
14             left: 0;
15             right: 0;
16             bottom: 0;
17         }




由于父盒子是没有宽高的, 所以子盒子就相对于页面中间垂直居中了


技术分享


 
关于浮动元素垂直居中的问题






























        

            
                
                  
                
                

                    联系

                    我们