<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
margin:0
padding:0
}
body{
font:12px "宋体"
text-align:center
}
a:link{
color:#00F
text-decoration:none
}
a:visited {
color: #00F
text-decoration:none
}
a:hover {
color: #c00
text-decoration:underline
}
ul{
list-style:none
}
.main{
clear:both
padding:8px
text-align:center
}
#tabs0 {
height: 200px
width: 100px
border: 1px solid #cbcbcb
background-color: #f2f6fb
}
.menu0{
width: 100px
}
.menu0 li{
display:block
float: left
padding: 0px
width:100px
text-align: center
cursor:pointer
background: #FFFFff
}
.menu0 li.hover{
background: #f2f6fb
}
#main0 ul{
display: none
}
#main0 ul.block{
display: block
}
-->
</style>
<script>
<!--
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li")
var mli=document.getElementById("main"+m).getElementsByTagName("ul")
for(i=0i<tli.lengthi++){
tli[i].className=i==n?"hover":""
mli[i].style.display=i==n?"block":"none"
}
}
//-->
</script>
</head>
<body>
<br />
<br />
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</body>
</html>
不知道是不是你想要的效果。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<style>标签中，输入css代码：body {text-align:center}，在<script>标签中输入js代码：
var a = ($(document).height() - $('form').height()) / 2
$('form').css('margin-top', a + 'px')
3、浏览器运行index.html页面，此时form标签成功在页面中水平垂直居中了。
