版权声明：本文为博主原创文章，评论区告知一声，大家随意转载！ https://blog.csdn.net/MessageBox_/article/details/82492153
CSS中的很多地方都是可以使用百分比单位的，之前一直理所当然的认为百分比就是相对于容器的宽高设定的，后来在自己实现垂直居中的多种写法时，才意识到这个问题，遂收集资料进行整理。
- 相对于容器的宽度的
相对于content-box宽度
width | max-width | min-width | margin | padding | grid-template-columns | grid-auto-columns | column-gap
相对于border-box宽度
left | right
也就是说设置的box-sizing属性会直接影响到百分比的计算值
(已经在chrome下进行测试) - 相对于容器content-box的高度的
相对于content-box高度
height | max-height | min-height | grid-template-rows | grid-auto-rows | row-gap
相对于border-box高度
bottom | top
(已经在chrome下进行测试) - 相对于自身宽高的
background-size | broder-radius | transform: translate() | border-image-width | transform-origin - 相对于父元素的font-size的
font-size
(已经在chrome下进行测试) - 相对于自身字号的
line-height
(已经在chrome下进行测试) - 相对于行高的
vertical-align
(已经在chrome下进行测试) - 其他特殊
文中的大部分属性的百分比单位自己都在chrome下进行了测试，其中相对于自身宽高一项未测试。文中描述如有错误，欢迎大家指出来一起交流。
本文参考如下文章
1. 知乎问答：css样式的百分比都相对于谁
2. 深入理解line-height与vertical-align
这个line-height为vertical-algin的讲解比较深入细致，有时间自己要研究一下，进行一下总结。