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