margin：auto与水平居中

auto：自动填充
当margin-right设置为100px，margin-left设置为auto
那么margin-left的值为屏幕总的宽度减去100px

Paste_Image.png

左右均为auto，水平居中显示
当margin-left与margin-right设置为auto
则平分剩余空间，也就是橙色部分会位于中间部位

Paste_Image.png

  background: lightcoral;
  width: 500px;
  margin-right: 100px;
  margin-left: auto;

对于图片的margin：0 auto；此时图片属于inline水平，并没有撑满整个容器，不存在剩余空间
因为它没有剩余的填充，所以设置auto，并没有任何变化

Paste_Image.png

为了使图片居中显示可以给图片img添加display：block；属性，使图片占据一行，从而有剩余的填充空间

Paste_Image.png

        <style type="text/css">
              img{
                    width: 200px;
                    margin: 0 auto;
                    }
        </style>

inline-block属性的水平居中，它是一个行内的块级元素，使元素成块状并且在一行排列，对于这样的元素水平居中，我个人觉得最方便的就是设置父类元素text-align：center；使元素水平居中

Paste_Image.png