html中margin:0 auto不居中解决详解

最新推荐文章于 2023-07-10 15:33:50 发布

ping65588

最新推荐文章于 2023-07-10 15:33:50 发布

阅读量693

点赞数

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/ping65588/article/details/126334859

版权

如下的代码为什么 margin:auto不能实现垂直居中？

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <style type="text/css">
         .div1 {
             background-color: gray;
             height: 500px;
             width: 500px;
         }
         .div2 {
             background-color: red;
             height: 200px;
             width: 200px;
             margin: auto;
         }
     </style>
 </head>
 <body>
     <div class="div1">
         <div class="div2"></div>
     </div>
 </body>
 </html>

margin：5px ；

等同于margin-top：5px；margin-left：5px；margin-right：5px；margin-bottom：5px；

所以按理解，margin：auto，应该是上下左右都是自动分配的，

但是W3C规定，top，bottom设置为auto，其实默认值为0。

所以margin:auto;=margin:0 auto;只是水平居中

就是因为这种情况，W3C又规定，只有绝对定位的元素才可以使用top，bottom为auto的自动分配从而实现上下左右都自动分配margin。
但是前提是要找到margin的可以参照的边界点，所以要设置top,bottom,left,right为0，这样元素就可以找到边界，margin也可以找到边界去auto分配外边距，从而实现水平垂直居中。