一直以来记错的CSS属性:Position 元素定位

我一直记忆的是 position:relative 是相对于父级元素定位的,今天才发现原来自己记错了。
也想明白了绝对定位的元素使用 margin:auto 为什么可以实现垂直居中

今天早上心有点静不下来,就去 SegmentFault 上看了看文章,有一篇文章 【“寒冬”三年经验前端面试总结之 CSS 篇】
里边的 垂直居中的方法四 我觉得挺奇怪的。

1
2
3
4
5
6
7
8
9
10
11
12
13
.outer {
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

为什么在 position:absolute 时,top,right,bottom,left 都为 0 时,使用 margin:auto 可以实现垂直居中。

是因为脱离文档流了还是因为别的?然后在群里讨论了下。

有些人说,absolute 之后变成行内块元素了,有些人说因为 margin

然后我又试了下 relativefixedsticky

只有 absolutefixed 这种脱离文档流的可以使用 margin:auto来居中。

设置了 leftright0 所以可以水平居中,topbottom0 可以使其垂直居中

归根结底是因为 margin:auto 填充了外部空间,然后定位是按照合模型最边界开始定位,即从 margin 开始。

box

另外还把自己一直以来记错的给掰了回来:

  • position:relative 是相对未定位前的元素自身来定位的。

我一直记忆的是相对于父级做定位。

以上

2019 年 11 月 20 日