无法弄清楚如何以保证金为中心图像：自动

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