HTML之垂直居中问题

今天遇到一个垂直居中的问题，调试了一个多小时，终于找到一个解决办法，虽然不够完美，但是能解决当前问题，现来总结一下居中的一些常见问题：

1. 表格居中：这个最好解决，直接调用现成的CSS Style - vertical-align: middle
2. DIV居中：这个就挺麻烦，因为现成的CSS Style对DIV无效，所以只能想一些办法来实现这种效果：
   • 如果是单行文字垂直居中，那最好的解决方案是定义DIV的inline-height和height为相同的值（也就是DIV的高度），这样就居中了；
   • 利用padding设置垂直居中，我们知道padding是内边距，如果设置内边距上下相等，那么DIV不就居中了；
3. 万能方法：这个方案适用于所有的页面元素，首先自己计算好元素占用了多少个像素和元素距离border-top的距离，直接更改padding-top的值为你计算的距离，这样元素就垂直居中了。虽然有点投机取巧，但是能实现效果也不失为一种解决方案！
4. 定义三个DIV，相互嵌套，如下图最终想要居中的元素居中了，CSS为：

.outerDiv{height:100px;width:100px;position:relative;} .middleDiv{position:absolute;top:50%;} .innerDiv{position:relative;top:-50%;}

因为我要居中的元素是ul里面的li要垂直居中，所以只能用方法3了，以后如果有更好的方法，接着更新！