这几天做网页的时候，经常会遇到CSS垂直居中的问题，于是响应一达人的名言“知之为知之，不知Google知”的号召！输入相应“CSS怎么才能垂直居中”“CSS垂直居中怎么办”之类弱弱的人肉搜索关键词果然找到很多答案，经整理总结了几个方法，希望对大家有用
1.定义line_height和height的值相等，最好加上overflow:hidden,笔者在Firefox和IE6.0下取消overflow:hidden
   Firefox超过宽度的字符将无视你定义的边框
   IE边框会随着你字符的长度延伸
代码：.middle{height: 5em;line-height: 5em;overflow: hidden;border:#333333 1px solid;width:150px;}
注意：此方法只能应用于一行字符垂直居中对齐
2.运用padding_top和padding_bottom，将两值设成相等
代码：.middle{padding-top: 15px;padding-bottom: 15px;}
注意：此方法不能固定高度，即不能设置height的值，而怎么对齐居中并和其它元素水平对齐，笔者使用人肉调节，即几个像素几个像素的调节，如果大家有更好的方法望告知，谢一个先。
3.如果你采用了标准的浏览器，你可以把元素当作表格单元来使用
代码：.middle{display: table-cell;height: 300px;vertical-align: middle;}
注意：IE下无效

• 周钟 发表于 2007-10-11 10:11:42
• [ 阅读全文 | 回复(0) | 编辑 ]

• 下一篇：杀毒记