2021-08-13

首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。

1.块及元素水平方向居中：

原理：两侧auto，则平分剩余空间，相当于水平居中。

代码如下：

div { margin-right: auto;  margin-left: auto; width:200px;  height: 200px } 当然也可以这样写 div { margin: 0 auto; width:200px;  height: 200px }  跟垂直方向无关，垂直方向可随便设置，只要水平左右都设置为auto即可。注意width宽度一定要设置，没有宽度的块默认就是100%，就没有auto值了。

2.块及元素水平居右：

原理：一侧auto，一侧没设置，则设置auto的一侧分配所有剩余空。

想让div居右显示，已经很简单了。把margin-left 的值设置为auto 即可。代码如下：

div { width:200px; height: 200px; margin-left: auto;}

原理：一侧定值,一侧auto,auto为剩余空间大小。代码如下：

div { width:200px; height: 200px; margin-left: auto; margn-right: 100px; }