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

Question

I've checked multiple threads and have tried multiple options. I've tried setting display to block, setting specific width for both image and container. Any other condition that I might be missing out on?

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

Remove position: absolute and apply margin: 0 auto to img . When position: absolute is applied on some element, it is taken out from the normal flow of DOM

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