Colin Stewart Colin Stewart - 1 year ago 62
CSS Question

Horizontally centre and bottom position image in a div

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

, and the image
, with
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 Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download