你看这个东西是不是没居中

前端切图仔还原UI设计师的设计稿是对UI的一种尊重，不能还原那就是你太菜了。每次我们欢天喜地的去找UI走查的时候，UI是这样的

你一看代码:

.center {
   
  display: flex;
  justify-content: center;
  align-items: center;
}

心中一惊：这都能对不齐，那一定是你的机子有问题，建议换一台，UI可能要让你当场横尸街头。今天我们来深究一下这个问题。

问题复现

首先我们把问题复现出来，我们不用搞什么花里胡哨的内容，直接一个span标签扔上来，你可能会说我傻，一个span和谁对齐，我们给它加个border试试
.border {
border:1px solid black;
}
我们来看效果，这是在华为Mate30自带浏览器中渲染的结果

如果你看不出有什么问题，那么我们再展示一下PC端chrome渲染的结果

能看出问题了吗？显然在安卓上渲染的文字，在content area（黑色方框的内容）中就已经不居中了，它会偏上，而我们后续的操作都是在对齐content area，所以我们没办法用CSS去解决这个问题，即使解决了也是一种hack的方式，因为CSS是没办法影响到content area的。那么什么可以影响到content area?字体可以，我们来试一试下面的代码，更改一下字体，我们看看现在在PC端会渲染成什么样子

.fantasy {
   
  font-family