無法弄清楚如何將圖像與邊距居中：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; 
}