无法弄清楚如何用边距居中图像：自动

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;
}