margin:auto水平居中和垂直居中的原理分析

最新推荐文章于 2024-03-22 10:15:53 发布

世态炎凉！！

最新推荐文章于 2024-03-22 10:15:53 发布

阅读量1w

点赞数 12

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/ws9029/article/details/113851118

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

margin属性平时写css几乎天天写，再熟悉不过了！今天我们来深入讨论下margin的一些居中的问题（本来这篇文章早就想写的，一直忘记了），话不多说，直接进入正题！

1.margin:auto

有人可能要问了，margin:auto 这个有啥好讨论的？先看下小测试的代码！

<style>
    .auto{
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: auto;
    }
</style>
<body>
    <div class="auto"></div>
</body>

先看下效果：
在这里插入图片描述
再看下调试工具的样式：

可以很清楚的发现：margin-left是0 ,margin-right也是0 ，那么 margin: auto === margin: 0 auto;

2.为什么margin: auto能实现水平居中，而垂直居中不行？

一般子是否在父元素里面居中都是需要计算的，如果父元素的宽度是200px,子元素的宽度是100px,公式：父元素的宽度=子元素的宽度+padding+margin+border(w3c标准盒子模型) ,这里子元素没有padding,border,那么子的外边距margin应该是（200-100）/2=50px ,如果子元素直接设置margin:auto,那么这个auto就是50px,所以这种居中是靠外边距margin-left 和margin-right来实现居中的,为什么垂直居中应该w3c默认规定margin-top和margin-right为0，所以实现不了垂直居中

3.为什么margin: auto通过绝对定位可以实现水平垂直居中

上面说了再正常的文档流当中w3c默认规定margin-top和margin-right为0，所以实现不了垂直居中，只有绝对定位的元素才可以，意思就是绝对定位之后如果设置了margin：auto,那么margin-top和margin-right不再为0,而是auto，同时需要设置top,bottom,left,right为0来找到父元素的位置，然后margin：auto会找到父元素的位置分配好上下左右外边距，从而实现水平垂直居中！

<style>
   body{
        background-color: #aaa;
    }
    .auto {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div class="auto"></div>
</body>

先看下效果：
在这里插入图片描述

世态炎凉！！

关注

12
点赞
踩
41

收藏

觉得还不错? 一键收藏
1
评论
margin:auto水平居中和垂直居中的原理分析

margin属性平时写css几乎天天写，再熟悉不过了！今天我们来深入讨论下margin的一些居中的问题（本来这篇文章早就想写的，一直忘记了），话不多说，直接进入正题！1.margin:auto有人可能要问了，margin:auto 这个有啥好讨论的？先看下小测试的代码！<style> .auto{ width: 200px; height: 200px; background-color: aqua; margin:
复制链接

扫一扫