最近，我开始升级网志了。在修改模板的过程中，需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。 未来，本文将持续更新。 1. 文字的水平居中 将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center; 2. 容器的水平居中 先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; } 3. 文字的垂直居中 单行文字的垂直居中，只要将行高与容器高设为相等即可。 比如，容器中有一行数字。 div id=”container”1234567890/div 然后CSS这样写： div#container {height: 35px; line-height: 35px;} 如果有n行文字，那么将行高设为容器高度的n分之一即可。 4. 容器的垂直居中 比如，有一大一小两个容器，请问如何将小容器垂直居中？ div id=”big” div id=”small” /div /div 首先，将大容器的定位为relative。 div#big{ position:relative; height:480px; } 然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。 div#small { position: absolute; top: 50%; height: 240px; margin-top: -120px; } 使用同样的思路，也可以做出水平居中的效果。 5. 图片宽度的自适应 如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写： img {max-width: 100%} 但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为： img {width: 100%} 6. 3D按钮 要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。 div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; …
