慕课网上的HTML/CSS教程
http://www.imooc.com/view/9
其中有三种方法
第一种是加入table标签
任务是实现div元素的水平居中，
初始代码如下
第二种方法是将其设置为内联元素，通过父类来修改
即在上面的初始代码里添加类来实现居中
css代码
下面一段话是摘抄与慕课网
【1】【方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。】
给出的代码如下
上面的代码先来分析style部分，为了直观的展现出left:50,left:-50，在每个类中添加border，如下
红色的为第一层，即div层，向右偏移了50%，起点变成了中间线，并不是居中显示；
然后是蓝色的ul层，相对于div层向左偏移50%，这里假设ul没充满，如上图，ul是相对于中间线偏移自身50%，即ul层是居中的；
最后来看li，也就是绿色的那层，li是写在ul里的，当然是居中的了，至于其是Container的子类，我觉得没有必要
不过上面令我奇怪的是float，因为li是块状元素，1,2,3应该是分别独立于三行的，当我将display:inline删除的时候，发现仍然没有什么改变，于是查了float的知识，
特摘抄于下
【2】【设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。
设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，还有代码在后面的是块元素（管它有没有浮动，是左浮动还是右浮动），均不能与之同行，除非设为display:inline。】
课程的最后也提到了float，使用此标签的元素变为inline-block，即内联块状元素
参考
【1】http://www.imooc.com/code/6365
【2】http://zhidao.baidu.com/question/253828906.html
原文：http://www.cnblogs.com/lanlanzi/p/6238811.html
