您的位置:首页> 日志> 前端技术 正文
DTOP

CSS3实现垂直居中

fatdong | 2015年07月03日 |

>>收藏本文 已有 1条评论

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

 

  如果在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;