Center image within it's container

Question

I can't seem to center my image, it's positioned absolute to it's parent which is relative.

I've used inspect element to try many ways, but it doesn't seem to want to work.

Please see the example here: http://dassiedev.dassieartisan.com/furniture

Here's my CSS:

    .tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
}
.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    max-width: none;
}

Answer 1

To center an img within a div, give the img a display: inline-block rule, and then give the div a text-align: center rule. This will center it horizontally.

.tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
    text-align: center;
}

.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    display: inline-block;
}