css实现多数量的li水平居中

这个问题看上去很简单，实现起来也得下点功夫

image.png

• HTML

<div class="imgList_bg">
   <ul id="imgList">
      <li>
        <img src="img/1.jpg" alt="">
      </li>
      <li>
        <img src="img/2.jpg" alt="">
      </li>
      <li>
        <img src="img/3.jpg" alt="">
      </li>
      <li>
        <img src="img/4.jpg" alt="">
      </li>
   </ul>
</div>

• css

.imgList_bg {
     position: absolute;   //此属性根据需要确定上下位置
     bottom: 10px;
     width: 100%;         
     text-align: center
}
#imgList {
     display: inline;
     margin-left: -10px
}
#imgList li {
     display: inline-block;
     margin-left: 10px;
}
#imgList li img {
     width: 100px;
     height: 70px;
     border: 3px solid #f8f8f8;
}

这样就可以是实现不同数量的li都可以水平居中