在项目中经常会用到一些很实用的css代码(*只做功能性记录，不追根究底，如有不合理的欢迎指正)

css图片上下居中

/*图片上下居中代码*/.imgvam {    /*非IE的主流浏览器识别的垂直居中的方法*/    display: table-cell;    vertical-align:middle;        /*设置水平居中*/    text-align:center;        /* 针对IE的Hack */    *display: block;    /**font-size:175px;约为高度的0.873，200*0.873 约为175*/    *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/    /*height:200px;*/}.imgvam img {    /*设置图片垂直居中*/    vertical-align:middle;}

不够位置显示以省略号显示(只支持一行)

.eli {
   　　　　overflow:hidden; 　　　　white-space:nowrap; 　　　　text-overflow:ellipsis; }

其中overflow:hidden;为溢出隐，white-space:nowrap;为强制不换行，text-overflow:ellipsis;显示省略符号来代表被修剪的文本

效果：

时间不等你，做你想做的事。时间不等你，做你想做的事。时间不等你，做你想做的事。时间不等你，做你想做的事。

 

 上面有用到强制不换行，在这里就把强制换行也记录下

word-wrap:break-word;

效果：

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

另外还有个更霸道的，用它可能会截断英文单词，影响阅读（在这里"good"被截断了）

word-break: break-all;

效果：

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

 说到控制文本还有一个很实用的东西，文字左右对齐

text-justify:inter-ideograph; text-align:justify;

 效果：

I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧

 

 背景透明，文字不透明，兼容IE

.test {
       background:rgba(0,0,0,0.2);/*非IE8及IE8以下*/}@media \0screen\,screen\9 {    /*IE8及IE8以下*/    .test {        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);    }}

另外rgba 和IE下filter数值的转换rgba 透明值 IE filter值

　　0.1 19

　　0.2 33

　　0.3 4C

　　0.4 66

　　0.5 7F

　　0.6 99

　　0.7 B2

　　0.8 C8

　　0.9 E5

　　转换公式：alpha*255再转换成16进制即可

（经测试可用 嗯~ 感谢强大的网友）

 

 

待续……