如何在居中對齊的容器內居中對齊左對齊 div 內的內容（例如，圖像）？

Question

如何在左對齊的 div 中居中對齊圖像。 它保持右對齊（在左對齊的 div 中）。

嘗試過：一切從位置：絕對； 保證金：自動； 嘗試覆蓋父 div。 我什至在 HTML 中加入了<span style="text-align:center"> ，這只會讓我的 CSS 陷入徹底的混亂。

#background {
  height: 150%;
  background: linear-gradient(to bottom right, #33ff99 30%, #660066 60%);
}

#leftbox {
  float: left;
  background: #ff3399;
  width: 25%;
  height: 280px;
  border: 2px solid #ff3399;
  border-radius: 30px;
  display: block;
  text-align: left;
}

// I even tried adding a child div around the image I want to center as follows (to no avail)

#workshops {
  width: 50%;
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}

// The following comes AFTER the issue

#middlebox {
  margin: auto;
  float: left;
  background: #44ff33;
  width: 50%;
  height: 280px;
  border: 2px solid green
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align: center;
}

#rightbox {
  float: left;
  background: blue;
  width: 24%;
  height: 280px;
  border: 2px solid blue -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  text-align: center;
}

下面是我在圖像上使用的代碼：

<!-- id tags--> 
#leftbox { 
   float: left; 
   background: #ff3399 ; 
   width: 25%; 
   height: 280px; 
   border: 2px solid #ff3399; 
   border-radius: 30px; 
   display: block; 
   text-align: left; } 
<!--The accompanying HTML follows--> 
<div id="leftbox"> 
  <a href="link.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','imageURL.jpg',1)"> 
  <img src="imageURL.png" name="Workshops!" width="250" id="Image3" /> 
</div>
</a>
</p>

Answer 1

這應該有效。

img{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}