什么情况下lineheight和height相等却不会居中对齐——特殊场景整理

居中对齐的原理

line-height可以理解成每行文字所占的高度。他的标准定义是每行文字基线与基线的距离。

例如，有一行20px大小的文字，如果设置为line-height:50px，那就是说，这行文字的高度会占50px。

显然，每个字的大小只有20px，于是浏览器就把多出来的30px（50px-20px）在这行文字的上面加上了15px，下面加上了15px。

这样的话，那文字就在这50px的空间内是居中的了（这个就是浏览器规定的，它就这个分配空间）。

这样的话，如果你的DIV是50px，正好这行文字也就相对于DIV居中了。

所以把line-height设置为容器div的高度就能使文字垂直居中

---

无法居中对齐的案例

案例一：font简写

height: 40px;
line-height: 40px;
font: 16px bold;
background: #e4393c;
color: #fff;

问题攒的多了，我自己的例子丢了～好气

不过在网上找了一个例子，发现真的没居中～

经过我的尝试，在Chrome浏览器中的结果是：

font的简写形式就是不居中～

而采用他的常用写法font-size:16px

就可以居中啦～

如下：

height: 40px;
line-height: 40px;
font-size: 16px;
font-weight:blod;
background: #e4393c;
color: #fff;