无法弄清楚如何将图像与边距居中：auto

Question

我检查了多个线程并尝试了多个选项。我试着设置显示来阻止，为图像和容器设置特定的宽度。我可能错过的其他任何条件？

HTML：

<footer> 
    <div id="footercontent"> 
     <div id="logobox"> 
      <img src="images/logo.png" /> <--- THIS IS THE IMAGE IN QUESTION 
     </div> 
     <div id="social"> 

     </div> 
    </div> 
</footer> 

CSS：

footer { 
    width: 100%; 
    height: 200px; 
    background-color: white; 
    position: relative; 
    margin-top: 70px; 
} 
#footercontent { 
    width: 70%; 
    height: 100%; 
    background-color: black; 
    margin: auto; 
} 
#logobox { 
    width: 30%; 
    height: 100%; 
    margin-right: 0; 
    float: left; 
} 
img { 
    height: 70%; 
    position: absolute; 
    margin: auto; 
    display: block; 
} 
#social { 
    width: 70%; 
    height: 100%; 
    background-color: white; 
    float: left; 
} 

Answer 1

删除position: absolute和应用margin: 0 auto到img。当position: absolute的一些元素上应用，它是从DOM

img { 
    height: 70%; 
    margin: 0 auto; 
    display: block; 
}