美文网首页
margin:auto为什么只能实现水平居中,不能实现垂直居中

margin:auto为什么只能实现水平居中,不能实现垂直居中

作者: 前端小小生 | 来源:发表于2019-10-22 00:15 被阅读0次

我们知道,块级元素即使设置了宽度,也会占满一行,为什么会这样?

因为默认的宽度规则是“适应于父级”规则(在水平方向上自动扩充)。即

margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right= width of containing block

对于绝对定位元素,有以下算式:

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right= width of containing block

而auto的作用是:自动填充剩余空间, 所以给div设置margin:auto时,在水平方向上 margin会填充 div这一行中除了left+border-left-width+padding-left+width+padding-right+border-right-width+right的剩余的空间,当左右的margin都设置为auto时,会平分剩余空间,从而实现水平居中。那为什么没有按照上述同样的方式填充垂直方向上的剩余空间呢?

因为在垂直方向上,块级元素不会自动扩充,它的外部尺寸没有自动充满父元素,也没有剩余空间可说。所以margin:auto不能实现垂直居中。

那用margin:auto可以实现垂直居中吗,答案是肯定的。

.father {

    width: 300px; height:150px;

    position: relative;

}

.son {
    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

    width: 200px; height: 100px;

    margin: auto;

}

当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样:

如果一侧定值,一侧auto,auto为剩余空间大小;

如果两侧均是auto, 则平分剩余空间

因为此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”。即.son这个元素的尺寸自动填充父级元素的可用尺寸。

总结:通过position:absolute 和 top:0 bottom:0将元素设为流体特性的元素,这样该元素可自动填充父级元素的可用尺寸。

格式化宽度:格式化宽度仅出现在“绝对定位模型中”,也就是出现在position属性值为absolute或fixed的元素中。

对于非替换元素,当left/right或top/bottom对立方位的属性值同时存在时,元素的宽度表现为“格式化宽度”,其宽度大小相对于最近的具有定位特性的祖先元素计算。

“格式化宽度”具有完全的流动性,也就是margin、border、padding、content内容区域同样会自动分配水平和垂直空间。

参考:

https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/

https://blog.csdn.net/Mr_lizi/article/details/83384468

相关文章

  • 盘点8种css实现垂直水平居中

    1.绝对定位居中技术 我们一直用margin:auto实现水平居中,而一直认为margin:auto不能实现垂直居...

  • html,css篇

    一.水平垂直居中 1.水平居中 ①margin:0 auto; 2.垂直居中 ①li...

  • 实现Div水平垂直居中

    水平垂直居中问题,在css中margin: 0 auto;可以实现水平居中,但是在垂直居中方面一直没有特定的属性,...

  • 如何居中div?

    水平垂直居中问题,在css中margin: 0 auto;可以实现水平居中,但是在垂直居中方面一直没有特定的属性,...

  • 如何让元素居中

    水平垂直居中问题,在css中margin: 0 auto;可以实现水平居中,但是在垂直居中方面一直没有特定的属性,...

  • margin:auto为什么只能实现水平居中,不能实现垂直居中

    我们知道,块级元素即使设置了宽度,也会占满一行,为什么会这样? 因为默认的宽度规则是“适应于父级”规则(在水平方向...

  • CSS(五)对齐方式(居中)

    一、水平居中 margin: auto;设置子容器margin属性,可使元素在父容器内水平居中 二、垂直居中 li...

  • CSS居中的几种方式

    1.水平居中的 margin:0 auto; 2.水平居中 text-align:center; 3.水平垂直居中...

  • (转)margin 实现水平居中,垂直居中原理

    原文地址:margin 实现水平居中,垂直居中原理 首先了解下,margin的auto属性的作用是用来分配剩余空间...

  • css div垂直居中

    方案一:div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 方案二:div绝对定位水平垂...

网友评论

      本文标题:margin:auto为什么只能实现水平居中,不能实现垂直居中

      本文链接:https://www.haomeiwen.com/subject/hicfvctx.html