如何將圖像與Div中心對齊

Question

我正在使用PHP和Smarty，我試圖將幻燈片的圖像顯示在提供的div的中間，但無法完成。

下面是代碼，有人可以幫助我嗎？

碼：

<div class="home_slide_show">
  <!--start-image-slider---->
    <div>                                               
      <ul class="rslides" id="slider_cars">
       {section name=sec1 loop=$car_photos}
         <li><img src="{$car_photos[sec1].photo}" alt=""></li>
       {/section}
      </ul>
    </div>
  <!--End-image-slider---->
</div>

CSS：

.home_slide_show{
    background-color: white;
    border: solid thick grey;
    border-radius: 10px; 
    width:200px;
    height:200px;
}

.home_slide_show img{
    width:100%;
    height:100%;
    display: block;
}

完整的HTML代碼：

 <div class="home_slide_show">
  <!--start-image-slider---->
  <div>
    <ul class="rslides rslides2" id="slider_cars">
      <li style="vertical-align: middle; display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out;" id="rslides2_s0" class=""><img src="images/cars/download.jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s1" class=""><img src="images/cars/images (1).jpg" alt=""></li>
      <li style="vertical-align: middle; float: left; position: relative; opacity: 1; z-index: 2; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s2" class="rslides2_on"><img src="images/cars/images (2).jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s3" class=""><img src="images/cars/images (7).jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s4" class=""><img src="images/cars/images.jpg" alt=""></li>
    </ul>
  </div>
  <!--End-image-slider---->
</div>

Answer 1

用戶代理將默認邊距和填充添加到ul元素。 兩者都設置為零。

Answer 2

如果您想將它們居中，請嘗試以下操作：

.img{
    width:100%;
    height:100%;
    display: block;
    margin: 0 auto;
}

也可以看看這篇文章： https : //css-tricks.com/snippets/css/absolute-center-vertical-horizo​​ntal-an-image/