当然需要给盒子设置宽度，不然盒子默认的宽度是父容器宽度。
也有其他方式，比如父容器设置display: flexjustify-content: center也是可以的。
方法不少能达到效果就好了。
举个例子<div style="width: 200pxheight: 200pxbackground: bluemargin: 0 auto"></div>
这一行直接放到body里边，他肯定是居中的。
flex居中:
<div style="display: flexjustify-content:center">
<div style="width: 200pxheight="200pxbackground: red"></div>
</div>
这个也能实现居中，当然也可以垂直居中，垂直的话display: flex后面加上flex-direction: column就可以了。
这里的分号是分隔符，最后一个样式可以不加，但只要后面有其他样式就必须要加分号，不然样式会失效。
可以为盒子添加“text-align: center”样式使图片在盒子中居中。
1、新建html文档，在body标签中添加一个div盒子，然后在这个div盒子中添加一张图片：
2、为div盒子和图片添加一些样式，这时默认情况下图片会向盒子的左上角对齐：
3、为div盒子添加“text-align: center”样式，这时图片会在div盒子中居中对齐：
