这几天总结了一些CSS使用过程的技巧，列举一些留作纪念。其中包括图片的居中显示，不同类别的选择器定义问题以及多class的综合定义。这些在设计过程中经常会遇见而且比较难解决的情况。其中比较多问到的是图片的居中，其他问题比较少见，不过却非常实用。
图片居中：
CSS代码：
div{
height:300px;
width:400px;
border:1px solid #666;
text-align:center;
vertical-align:middle;
display:table-cell;
font-size:300px;}img{vertical-align:middle;}
Html代码：
<div><img src="pic.gif" /></div>
说明：通过display的table-cell属性和font-size的控制来控制图片居中，代码还需要优化，图片的现实效果并没有达到完美的角度，不同的浏览器之间还是存在区别待遇。
还有一个就是选择控制：
CSS代码：
.d1.d2{background-color:#999;}Html代码：
<div class="d1 d2">灰色背景</div>
中间没有逗号分开的情况下代表，需要两个属性同时存在的时候显示效果。
选择器控制：
CSS代码：
*[title]{font-weight:bold;}
input[type="button"]{background-color:#FF0000;}
input[type="submit"]{background-color:#0000FF;}Html代码：
我的<span title="标记">标题加粗</span>部分
<input type="button" value="button" />
<input type="submit" value="submit" />
以上代码解决了不同的type以及具体定义的样式，显示的效果是：所有存在title标注的内容都显示加粗效果。input的类型是button的背景显示红色；input的类型是submit的背景显示蓝色。这个方法可以扩展应用到非常多的地方，设计人员可以根据自己的需求自由控制。