margin: 0 auto水平居中无效的解决方法

html代码

<div class="box">
      <img src="" alt="" class="center">
</div>

1. 首先需要居中的元素必须能设置宽度(display: block;)
2. 设置需要居中的元素宽度

所以css代码如下

.box{
  width: 400px;
}
.center{
  display: block;  // 块级元素可以不加
  width: 100px;   // 必须要有
  margin: 0 auto;
}

如有不对的地方或更好的方法请指出，感谢您的阅读