Horizontally centre and bottom position image in a div - html

Question

New guy over here. I've searched and have found similar issues but not exactly what I am after.
I simply want to know how to horizontally centre an image within a div, but also position the image at the bottom of the div (20px or so from the bottom to be precise).
I can kind of get the look I'm after by setting the container div as position:relative, and the image position:absolute, with bottom:30px and margin-left: 49%. I would just rather it be exact, rather than using left margin. The container needs to be relative for other elements I have on the page.
Any help will be greatly appreciated. Thanks.

Answer 1

Horizontally center and vertically bottom divClick here
.parent {
position: relative;
}
.img {
width: 50px;
height: 50px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
}

Answer 2

centers the absolute image inside the relative div
div > img {
left: 50%;
transform: translateX(-50%);
}

Answer 3

Alternatively, you can combine setting left/right to zero and setting the left/right margin to auto:
.box {
position: relative;
}
.box img {
position: absolute;
left: 0;
right: 0;
bottom: 2em;
margin: 0 auto;
}
Demo: https://jsfiddle.net/ffyof90e/
Explanation: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?

Answer 4

Do it like this, for example:
<div id="divid">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42">
</div>
You can now apply css like this:
div > img {
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
#divid{
position: relative;
height: 300px;
width: 300px;
border: 3px solid #73AD21;
}
You can check it at https://jsfiddle.net/n4528wxz/1/