css如何让ul居中

第一个问题
UL设置margin:0px auto是指UL本身相对于父级对象居中。你的UL父级对象是DIV，所以并不是相对屏幕居中，而是相对父级DIV300个PX的居中。解决这个问题的方法是把DIV的宽度去掉，让DIV默认为BODY的宽度。或者干脆直接把父级的DIV去掉。
第二个问题
如果要垂直居中，valign很多浏览器兼容性不好，一般解决方法：如果是一行的话可以设置行高line-height属性和高度height相等；如果是多行的话要复杂的多，可以考虑将父级对象设置为相对定位position:relative，要居中的对象设置为绝对定位position:absolute，然后慢慢调整left和top的值。
第二个问题你还有一个错误就是一个对象如果加了padding之后的话，跟它的宽度没有关系，也就是说。如果你设置一个对象的宽度为200px,padding为50px，它的真实宽度就是200px 加上左边的50px的padding,右边的50px的padding，加起来一共300px;
第三个问题
同第一个问题,li的左右居中依然是相对于它的父级对象即ul居中，只浏览器的宽度没有关系。
第四个问题
没明白你的意思，一个UL里有好多个LI，你要是多个li同时居中？就是全部重叠在一起？还是说
什么居中？或者你的意思是比如ul高200,一共有两个LI，两个LI一个人有50的高度，居中的意思就是说两个LI应该本身占100的高度，然后上面空50，下面空50？

这个网上有很多教程的，基本上是先清除默认格式，然后给一定的宽度，再设置浮动属性：
ul
li
{
list-style:none;
width:200px;
float:left;}
居中需要父容器设置：margin:auto

让LI单独居中不行，但可以让UL居中。比如有五个LI标签，每一个LI的宽度是100px，就把UL的宽度设为500px 然后居中;
eg: ul {width:500px; height:auto; margin:0px auto;}
ul li { width:100px; float:left; text-align:center}

通常情况li上加float:left是为了让标签并排显示，如果不加的话默认就是换行的
而上面加position: relative; left: -50%;这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px;一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的<ul style="position: relative; left: 50%; float:left; ">有点问题，加了position: relative; left: 50%;就没必要加 float:left; 了而且应该是无效的
还有就是position: relative; left: 50%;并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：<div style="position:absolute;left:50%; top:50%; width:200px; height:100px;margin-left:-100px;margin-top:-50px; background:red;"></div>
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0 auto;，尽量少用position属性来设定，

利用li的浮动固定宽度来实现，li的默认display为block，将这个属性改为inline就可以让ul li居中。

例：

<style type="text/css">
#bNav{
margin-top:10px;
background:#D9EBF5;
text-align:center;
}
#bNav ul{
padding:4px 0;
margin:0;
overflow:hidden;
}
#bNav ul li{
display:inline;
padding:0;
}
</style>
<div id="bNav" class="bNav">
 <ul>
  <li><a href="#" title="Home">公司主页</a></li>
  <li>|</li>
  <li><a href="#" title="About Us">About Us</a></li>
  <li>|</li>
  <li><a href="#" title="形象设计">形象设计</a></li>
  <li>|</li>
  <li><a href="#" title="艺术天地">艺术天地</a></li>
  <li>|</li>
  <li><a href="#" title="Contact Us">Contact Us</a></li>
  <li>|</li>
  <li><a href="#" title="应用开发">应用开发</a></li>
  <li>|</li>
  <li><a href="#" title="工作服务">工作服务</a></li>
  <li>|</li>
  <li><a href="#" title="申请链接">申请链接</a></li>
 </ul>
</div>

推荐的做法是不用ul和li来做页码，而是直接用a标签来做
<div>
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>
＜/div>
然后设置div text-align:center，再定义一下超链接的边距什么的就可以了。因为ul宽度不定的水平居中太复杂了，很难实现，与其纠结这样的问题，还不如把它简单化处理。

---