html - 无法让图片在div中垂直居中

Question

再一次，我无法让图像在特定的 div 中居中。我遇到的答案只是水平居中，而不是垂直居中

#wrap { 
width: auto; 
margin: 0 auto; 
overflow: hidden;
float: left;
}
/*header info if needed
#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
display: inline-block;
padding-right: 90px;
}

div.headerImg {
display: inline-block;
}
*/ 

#leftBlock { 
width: 50%; 
height: 500px; 
background: #000; 
float: left; 
}

#leftBlock img {
display: block;
margin: auto;
transition: transform 4s;
}

#leftBlock img:hover {
transform: scale(1.8);
}

#rightBlock { 
width: 50%; 
height: 500px; 
background: #8ab78f; 
float: left; 
}

#rightBlock img {
display: block;
margin: auto;
}

/*ignore footer*/
#footerBlock { 
height: 200px; 
background:  #29342a ; 
clear: left; 
}

<div id="wrap">
<div id="headerBlock">
    <div class="headerText">blah blah blah so neat</div>
    <div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
    </div>
</div>

<div id="leftBlock">
    <img src="/leftside.jpg" height="250" width="250">
</div>

<div id="rightBlock"></div>
     <img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>

</div>

我遇到的问题是，它只喜欢水平居中。我找到的唯一解决方案是在下面执行以下操作，但真正要做的是将它移到整个屏幕上，我必须指出它的去向(应该在 leftBlock div.. 内):

#leftBlock img {
position: absolute;
top: 50%;
margin-top: 305px;
left: 50%;
margin-left: -450px;
transition: transform 4s;
}

Answer 1

如果我理解最终目标，您想将 position: relative 添加到父级，删除图像上的边距并使用 transform: translate(-50%,-50% ) 结合 top: 50%;左:50% 使图像相对于父级居中。

#wrap {
  width: auto;
  margin: 0 auto;
  overflow: hidden;
  float: left;
}


/*header info if needed
#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
display: inline-block;
padding-right: 90px;
}

div.headerImg {
display: inline-block;
}
*/

#leftBlock {
  width: 50%;
  height: 500px;
  background: #000;
  float: left;
}

#leftBlock img {
  display: block;
  margin: auto;
  transition: transform 4s;
}

#leftBlock img:hover {
  transform: translate(-50%,-50%) scale(1.8);
}

#rightBlock {
  width: 50%;
  height: 500px;
  background: #8ab78f;
  float: left;
}

#rightBlock img {
  display: block;
  margin: auto;
}


/*ignore footer*/

#footerBlock {
  height: 200px;
  background: #29342a;
  clear: left;
}

#leftBlock {
  position: relative;
}

#leftBlock img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 4s;
  transform: translate(-50%, -50%);
}

<div id="wrap">
<div id="headerBlock">
    <div class="headerText">blah blah blah so neat</div>
    <div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
    </div>
</div>

<div id="leftBlock">
    <img src="/leftside.jpg" height="250" width="250">
</div>

<div id="rightBlock"></div>
     <img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>

</div>