首先要明白，margin的auto属性的作用是分配剩余空间，所以只对有剩余空间的元素（块和元素）有效。比如给一张图片设置margin:0auto是无效的，因为图片是行内元素，不占一整行，没有剩余空间。1、块和元素水平居中：原理：两边auto平分剩余空间，相当于水平居中。div{margin-right:auto;左边距：自动；宽度：200px；height:200px}当然你也可以这样写div{margin:0auto;宽度：200px；height:200px}和垂直方向没关系，垂直方向可以随便设置，只要水平左右都设置为auto即可。注意宽度width一定要设置，不带宽度的block默认100%，没有auto值。代码如下：2.块和元素在右侧水平放置：原理：一侧为auto，另一侧未设置，则设置为auto的一侧分配所有剩余空间。想让div显示在右边很简单。只需将margin-left的值设置为auto即可。代码如下：div{width:200px;高度：200px；margin-left:auto;}原则：一边是fixed，一边是auto，auto是剩余空间的大小。代码如下：div{width:200px;高度：200px；左边距：自动；右边距：100px；}上面的方法只能实现水平方向，对于垂直方向是无效的，因为垂直方向已经没有剩余空间了。没有更多的解释。3.如果要实现垂直居中，可以使用绝对定位。DIV{背景：#ff0000;宽度：200px；高度：200px；posity：绝对的；顶部：0；左：0；右：0；边距：自动；}边距：自动；项目不会水平和垂直居中。解释一下原理：1、在正常的内容流中，margin:auto的效果相当于margin-top:0；保证金底部：0。2.position:absolute使得绝对定位块跳出内容流，内容流中其余绝对定位的部分在渲染的时候不渲染。3、置顶：0；左：0；底部：0；右：0；forblockarea会重新分配一个boundingbox给浏览器，block会填满其父元素的所有可用空间，所以margin在垂直方向上现在有可分配的空间。4、然后设置margin的垂直方向为auto，实现垂直居中。（注意必须设置高度）。
