使用line-height垂直居中时，要注意border的设置

对于一行文字，我们经常有垂直居中的要求。比如我们制作一个按钮时，其上的文字。

这时候，利用CSS的方法，将line-height设置为对象的height时，此对象中的文字则会垂直居中。

本来这个方法不会有太多问题，但是当我们给这个对象设置border时，问题就来了。我在做按钮时，给我的按钮设置了border: 2px solid #ddd;由于按钮不算太大，我使用此方法，并没有发现有什么不妥。但是，给UI看时，她说我没有垂直居中。后来仔细测量，果然有微小的不同。

从未怀疑这个方法有什么不妥。可是当你尝试将border设置为一个很粗的值时，就会发现此方法的问题了。

从上图，就可以明显看出border的影响。这时候解决的方法就是将border的设置放置在此对象的外层。