HTML+CSS垂直居中其实很简单
注意：
1、因为a标签是行元素，必须用display:block;把他变成块级元素，同理其他行级标签也是如此
在起作用。
2、height:2em; line-height:2em; 必须制定在要垂直居中的直接父级标签，比如这
一、一行文本的垂直居中 查看演示
说明： ul li a{} 中的
width:100%;
height:2em;
line-height:2em;
display:block;
在起着主要作用，其他的多为装饰和方便演示看效果用过的。
注意：
1、因为a标签是行元素，必须用display:block;把他变成块级元素，同理其他行级标签也是如此
在起作用。
2、height:2em; line-height:2em; 必须制定在要垂直居中的直接父级标签，比如这里，如果指定在li a中将不起作用。
二、div块的垂直居中
我想说用CSS写个兼容各种浏览器的div块的垂直居中，个人感觉必要性不大，即使实现了，也是需要添加一些无谓的标签。
大致意思就是把DIV 定义成table，为兼容IE 需要使用 top 50%和top -50% 还要搞一个绝对定位，两个相对定位。
如果你就想要个这种效果，请参看：蓝色理想 http://www.blueidea.com/tech/web/2006/3231.asp
一行文字居中的演示代码如下：
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>HTML+CSS垂直居中其实很简单_懒人建站 http://51xuediannao.com</title>
-
<style>
-
body,ul{
-
padding:0px;
-
margin:0px;
-
padding-top:20px;
-
font-size:10pt;
-
font-family:"宋体";
-
}
-
ul{
-
width:800px;
-
height:400px;
-
margin:0 auto;/*CSS才是水平居中全靠他了*/
-
border: 1px solid #999999;
-
list-style-type: none;
-
}
-
ul li{
-
width:95%;
-
height:auto;
-
margin:0 auto;
-
margin-bottom:4px;}
-
ul li a{
-
text-decoration: none;
-
color:#333;
-
width:100%;
-
height:2em;
-
line-height:2em;
-
display:block;
-
border: 1px solid #999999;
-
}
-
ul li a:hover{
-
color: #FF0000;
-
text-decoration: underline;
-
}
-
</style>
-
</head>
-
-
<body>
-
<ul>
-
<li><a href="http://www.51xuediannao.com/HTML+CSS/2009/1117/html+css01.html" title="html+css模板黄色调博客类HTML源码">html+css模板黄色调博客类HTML源码</a></li>
-
<li><a href="http://www.51xuediannao.com/JS/texiao/20091117/QQnav.html" title="类似QQ的竖向展开折叠菜单HTML+CSS结构">类似QQ的竖向展开折叠菜单HTML+CSS结构</a></li>
-
<li><a href="http://www.51xuediannao.com/JS/texiao/20091117/zhedie.html" title="HTML+CSS结构鼠标点击折叠展开折叠式菜单">HTML+CSS结构鼠标点击折叠展开折叠式菜单</a></li>
-
<li><a href="http://www.51xuediannao.com/JS/texiao/20091117/qqkefu2.html" title="仿真QQ界面的随屏滚动QQ客服代码">仿真QQ界面的随屏滚动QQ客服代码</a></li>
-
<li><a href="http://www.51xuediannao.com/JS/texiao/20091116/zhuangtailan.html" title="JS自定义链接的状态栏文字提示">JS自定义链接的状态栏文字提示</a></li>
-
<li><a href="http://www.51xuediannao.com/JS/texiao/20091113/qqkf.html" title="JS+CSS左下角随屏滚动QQ客服浮动代码">JS+CSS左下角随屏滚动QQ客服浮动代码</a></li>
-
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091111/ie6ie7ie8.html" title="让IE6具备IE7和IE8的特性(IE6也玩web标准)">让IE6具备IE7和IE8的特性(IE6也玩web标准)</a></li>
-
</ul>
-
-
</body>
-
</html>
来源：jquery 图片特效|发布人：这样也行|2011-05-11|热度：次|收 藏|分享到...|报 错
分享到：
- 相关文档
-
懒人建站