px、em、rem都能表示尺寸，但有所不同，而且各有優缺點。
px表示“絕對尺寸”，利用px設定字型的大小和元素的寬高較為精确。px的缺點就是不能适應浏覽器縮放時産生的變化，是以一般不用于響應式網站。
em表示相對尺寸，會根據相應裝置螢幕尺寸的變化而變化。其相對于父容器的font-size。浏覽器預設字型大小為16px，如果在html中未設定font-size，那麼預設font-size為16px，等于1em。比如你目前的螢幕為3860*1080，設定font-size為50px，那麼1em等于50px；現在螢幕分辨率變成了1366*768，那麼font-size應變為768*50/1080，約為35.55px，則1em等于35.55px。
rem也表示相對尺寸，其參考對象為根元素<html>的font-size。與em不同的是，它不受父容器的font-size的影響。
font-size對inline-block元素垂直居中的影響？
垂直方向的預設基線是middle，當設定了font-size後會将inline-block的基線設定為文本的baseline，這就是設定font-size後導緻例如<img>元素無法垂直居中的原因。
參考文章：
1，CSS之px、em、rem三者的聯系與差別
https://baijiahao.baidu.com/s?id=1606146424842978662&wfr=spider&for=pc,
2，html px em pt長度機關(像素 相對長度 點)知識篇
http://www.divcss5.com/html/h89.shtml,
3，關于font-size對垂直居中影響的問題
https://blog.csdn.net/qq_30541261/article/details/79754478