几个经典的css技巧

使用 line-height 垂直居中

line-height:24px;  

 

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致）

清除容器浮动

#main { overflow:hidden; }  

 

不让链接折行

a { white-space:nowrap; }  

 

上面的设定就能避免链接折行

始终让 Firefox 显示滚动条

html { overflow:-moz-scrollbars-vertical; }  

 

body, html { min-height:101%; }  

 

使块元素水平居中

margin:0 auto;  

 

其实就是

margin-left: auto; margin-right: auto;  

 

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{ text-align: center; }  

 

然后定义内层容器

text-align: left;  

 

恢复。

隐藏 Exploer textarea 的滚动条

textarea { overflow:auto; }  

 

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 { page-break-before:always; }  

 

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus { outline:none; }  

 

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* { margin: 0; padding: 0 } 

 

 

评论

19 楼 wangjianghua 2010-11-12  

这里是指这个页面内的内容，文字垂直居中，我认为可以用楼主的方法。
若是div垂直居中，我认为还是用绝对定位要好一些。

18 楼 congdao 2010-11-09  

网页居中的一种方法（1）
  <div align="center" style="background:blue;">
<div style="width:1024px;height:200px;background:red;">
         我要居中！
</div>
  </div>

网页居中的一种方法（2）
  <div style=" text-align:center; width:100%;background:pink;">
<div style="width:1024px;height:200px;background:red;margin:0px auto;">
         我要居中！
</div>
  </div>
这两种方法是同一种方法，因为IE中新建DIV的时候默认是占用父容器的（浏览器）100%的宽度的。

17 楼 leeleo 2010-11-09  

mybreeze77 写道

leeleo 写道

diqizhan 写道

zhengyutong 写道

引用

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
期前也提到过这样的问题，更多信息可以看这里。

请问“这里”是哪里？

对，请问“这里”究竟是指哪里呢？

这是从别地方复制过来的，我也不知道这里是指哪里，复制过来的目的有两个，第一方便我以后查看，第二想跟大家分享。

好像博客里面没有规定必须是原创吧？
爱专牛角尖，吹毛求疵，中国程序员的通病~~~有在这里专的时间，你们也多学点东西，多敲几行代码了，唉~~~~

你的目的很好，但是做法有待商榷，比如“这里”都不改，我很怀疑这篇文章你自己是否看过一遍

说实话，这篇文章我真没有看过一遍，我只看我需要的部分就行了啊。还是那句话，复制过来的目的有两个，第一方便我以后查看，第二想跟大家分享。

16 楼 mybreeze77 2010-05-28  

leeleo 写道

diqizhan 写道

zhengyutong 写道

引用

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
期前也提到过这样的问题，更多信息可以看这里。

请问“这里”是哪里？

对，请问“这里”究竟是指哪里呢？

这是从别地方复制过来的，我也不知道这里是指哪里，复制过来的目的有两个，第一方便我以后查看，第二想跟大家分享。

好像博客里面没有规定必须是原创吧？
爱专牛角尖，吹毛求疵，中国程序员的通病~~~有在这里专的时间，你们也多学点东西，多敲几行代码了，唉~~~~

你的目的很好，但是做法有待商榷，比如“这里”都不改，我很怀疑这篇文章你自己是否看过一遍

15 楼 Kevin_Lee182 2010-05-24  

鹤惊昆仑 写道

text-align:center;width:100%;这个居中技巧还是非常有用的（图片亦适用），跨浏览器支持也非常不错。

必须设置块的宽度吗？不设置的时候为什么在有的浏览器中也可以呢？

14 楼 leeleo 2010-01-27  

diqizhan 写道

zhengyutong 写道

引用

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
期前也提到过这样的问题，更多信息可以看这里。

请问“这里”是哪里？

对，请问“这里”究竟是指哪里呢？

这是从别地方复制过来的，我也不知道这里是指哪里，复制过来的目的有两个，第一方便我以后查看，第二想跟大家分享。

好像博客里面没有规定必须是原创吧？
爱专牛角尖，吹毛求疵，中国程序员的通病~~~有在这里专的时间，你们也多学点东西，多敲几行代码了，唉~~~~

13 楼 westup 2010-01-17  

mark 一记

12 楼 solid210 2010-01-08  

mark一下

11 楼 bcsj123 2010-01-06  

这几个样式好生疏

10 楼 young_suse 2010-01-06  

确实很实用，期待楼主继续更新

9 楼 鹤惊昆仑 2010-01-05  

text-align:center;width:100%;这个居中技巧还是非常有用的（图片亦适用），跨浏览器支持也非常不错。

8 楼 寄生虫 2010-01-03  

愿意分享就是好的，别打击别人。

7 楼 nypcs 2010-01-03  

呵呵，对啊，都没说清楚，把我们忽悠了

6 楼 kjying 2010-01-01  

楼主灌水不敬业,从其他地方复制过来的,没把"这里"处理一下

5 楼 naily 2009-12-31  

请问“这里”究竟是指哪里呢？

4 楼 diqizhan 2009-12-31  

zhengyutong 写道

引用

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
期前也提到过这样的问题，更多信息可以看这里。

请问“这里”是哪里？

对，请问“这里”究竟是指哪里呢？

3 楼 zhengyutong 2009-12-31  

引用

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
期前也提到过这样的问题，更多信息可以看这里。

请问“这里”是哪里？

2 楼 zombre 2009-12-30  

块元素居中不只是CSS设计的问题，在IE中要实现快居中，要在页面的顶部加上当前页面代码要遵循的协议，我一般会加上“http://www.w3.org/TR/html4/loose.dtd”.

1 楼 binlaniua 2009-12-29  

使块元素水平居中
margin:0 auto


好像如果是IE的话

页头要加什么协议的好像是xhtml