为啥以下代码不能让图片居中

如果设置margin-left=100px它会右移，但是为啥以下代码的结果是图片紧贴左边而不是居中

<html>
    <head>
        <style>
            div{
                width: 500px;
                height: 500px;
                background-color: chartreuse;
            }
            img{
                width: 200px;
                height: 200px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="./source/1.jpg">
        </div>
    </body>
</html>

因为img 是内联元素，不能居中是因为img没设置 display: block; 设置了这个才可以。

display: block; img

img{
  width: 200px;
  height: 200px;
  display: block;
  margin: 0px auto;
}

img是行内元素，可以视为一个有宽高的文本元素，给div设置text-align:center或者给img设置display:block，都可以使图片居中