CSS中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。

1. 相對於容器的寬度的
   相對於content-box寬度
   width | max-width | min-width | margin | padding | grid-template-columns | grid-auto-columns | column-gap
   相對於border-box寬度
   left | right
   也就是說設定的box-sizing屬性會直接影響到百分比的計算值
   (已經在chrome下進行測試)
2. 相對於容器content-box的高度的
   相對於content-box高度
   height | max-height | min-height | grid-template-rows | grid-auto-rows | row-gap
   相對於border-box高度
   bottom | top
   (已經在chrome下進行測試)
3. 相對於自身寬高的
   background-size | broder-radius | transform: translate() | border-image-width | transform-origin
4. 相對於父元素的font-size的
   font-size
   
   (已經在chrome下進行測試)
5. 相對於自身字號的
   line-height
   (已經在chrome下進行測試)
6. 相對於行高的
   vertical-align
   (已經在chrome下進行測試)
7. 其他特殊

文中的大部分屬性的百分比單位自己都在chrome下進行了測試，其中相對於自身寬高一項未測試。文中描述如有錯誤，歡迎大家指出來一起交流。

本文參考如下文章
1. 知乎問答：css樣式的百分比都相對於誰
2. 深入理解line-height與vertical-align

這個line-height為vertical-algin的講解比較深入細緻，有時間自己要研究一下，進行一下總結。