在div中水平和垂直對齊圖像

Question

我正在使用Bootstrap和WordPress。

我一直在研究如何在div內水平和垂直對齊圖像（顯然是經典問題）。 我使用此問題的答案來垂直對齊我的圖像： 如何在div中垂直對齊圖像

現在，我需要水平對齊。 我知道這樣做，通常可以添加margin：0 auto;

問題是我遵循的方法使用margin：auto; 如果我將其更改為margin：0 auto ，它將取消垂直對齊；

我開始對此問題做一個JSFiddle，但是我無法復制它。 因此，我認為這是Bootstrap中要覆蓋它的東西，但是我不確定是什么。

這是我在另一個stackoverflow問題的垂直對齊解決方案中使用的基本代碼：

HTML

<div class="crop-featured-2">
    <img src="image.png">
</div>

CSS

.container { 
     position: relative;
     width: 100%;
     overflow: hidden; 
}

.crop-featured-2 {  
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid red;
    padding: 5px;
    display:block;
}  
.crop-featured-2 img {  
    min-height: 100px;  
    width:100%;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto; 
    border:0px; 
    padding:0;
}

您可以在http://ucaftercruz.com/upcoming/?page_id=30上看到問題。 它是頂部的滑塊，問題出在.carousel-inner div中。 將瀏覽器的大小調整為大約800像素寬，以便能夠真正看到問題。

非常感謝！

Answer 1

我看了你的網頁。 我認為如果您僅從此選擇器中刪除寬度規則，則該問題會自行解決：

.crop-featured-2 { 
  height: 320px;
  width: 575px;
  position: relative;
}

代替使用

.crop-featured-2 { 
  height: 320px;
  position: relative;
}

Answer 2

嘗試這個

.crop-featured-2 {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}