前几天在做项目的过程中，当字体小于12px的时候，很难完全居中显示，意思是有点抓狂.各种百度找到一个貌似不错的方法。总结出来分享给你我。在PC端的Chrome浏览器中，小于12像素的字体仍然以12像素显示，即使-webkit-text-size-adjust:none;设置了，好像没有效果。经过实验，我发现下面两种方法比较好用。读者可以听我详细说说。方法1使用transform:scale()如果设计同学给你的字体大小是10px，而你设置了font-size:10px，此时在PC端测试是看不到效果的；一个有用的方法是：font-size:12px//PC端Chrome最小字体transform:scale(0.833333333);高度：12px；//设计给的高度是10pxline-height:12px;这种方法可以将字体缩小到将近10px，但是包裹字体的宽度、高度，甚至标签(div,p)的边距值都减少了0.8333333。如果设计同学给你的div的高度是20px，为了正确显示20px的高度，你必须把height设置为(20/0.8333333)px，width和margin同理设置；要使其居中，还必须将line-height设置为(20/0.8333333)px；这种计算方式比较复杂，而且这种方式可能会影响其他元素在文档流中的位置，所以产生了下面的方式2。方法二方法二中有两个比较重要的点：(1)对于小于12px的字体，可以先放大一倍，然后使用transform缩小0.5倍(2)就标签的位置而言，可以给定一个相对定位的父元素，可以根据设计图设置这个父元素的高和宽，然后将其定位设置为相对定位，位于父元素的中心（垂直和水平）居中）。HTML结构如下：
