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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,251评论 0 8
  • 1.绝对定位居中技术 我们一直用margin:auto实现水平居中,而一直认为margin:auto不能实现垂直居...
    DecadeHeart阅读 5,499评论 0 3
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6
  • 在很多人眼里面程序员是一个很会赚钱不会花钱的一类人,因为程序员的工资在各个行业中还算是收入不错的一份职业,...
    晨雪落客阅读 4,748评论 0 2
  • 迷路与坚持就是一墙之隔 自从喜欢上登山徒步后,只要有机会自己就会往山里跑,他就想有一种神奇的魔力在吸引着自己,让自...
    朱家朱少阅读 1,586评论 0 0