最近在做多屏配套工作时遇到这样的一个按钮效果，圆角、两种纯属色底色、小图标、文字方向垂直并且垂直居中，效果如下图：

　　如果在PC版上做，有时要考虑到旧版浏览器的兼容性，很多时候我们都是一个一个的把它切下来做成图标；但现在手机和平板等移动端的浏览器大多都支持CSS3和HTML5，所以那些什么IE678浏览器的兼容问题可以不用去想了，很多效果都可以直接用CSS3来实现。这里的圆角效果就不用说了吧，这个很常用做输出的都应该知道，这里主要说的是垂直居中的效果。

　　这个很早以前用table做网站的时代，这个其实很简单，一个valign="middle"就搞掂了，但后来流行div+css后，发现div好像没垂直这个功能（可能是我才疏学浅吧，一直没找到这个），每次做这个垂直居中都要加个table进来。再到现在应该算是html5+css3的时代了吧，好歹也要装装逼吧，在里再放个table成何体统~~于是哥上网搜了一下，果然CSS3已经支持垂直居然，而且能实现垂直居中的方法一大堆，很多复杂又看不懂的我就不说了，直接过滤，下面找了个简单易用的给大家，class名自己随便改一下就可以了，在要用到垂直居中的地方加一下这个class就可以了。

1. .czjz{ 
2.     display:-webkit-box;  
3.     -webkit-box-orient:horizontal;  
4.     -webkit-box-pack:center;  
5.     -webkit-box-align:center;  
6.     display:-moz-box;  
7.     -moz-box-orient:horizontal;  
8.     -moz-box-pack:center;  
9.     -moz-box-align:center;  
10.     display:-o-box;  
11.     -o-box-orient:horizontal;  
12.     -o-box-pack:center;  
13.     -o-box-align:center;  
14.     display:-ms-box;  
15.     -ms-box-orient:horizontal;  
16.     -ms-box-pack:center;  
17.     -ms-box-align:center;  
18.     display:box;  
19.     box-orient:horizontal;  
20.     box-pack:center;  
21.     box-align:center;  
22. }