I can't figure out how I can make a responsive image and at the same time make the image centered regardless if it is viewed on a cellphone or on a computer with a wider resolution.

I'm using css class .img-responsive but that always does align the image left. I checked on the fields set by that class but can't find out how to combine the different styles so that the image is responsive and at the same time centered.

It's a simple image contained within an div or article specified with a row-fluid class.

Here what you want. responsive image demo.

<img src="http://lorempixel.com/600/450/" class="ri" />

img.ri
{
    position: absolute;
    max-width: 80%;
    top: 10%;
    left: 10%;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

img.ri:empty
{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 90%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}

You can use @media and other formatting property for it.

Here is a tutorial on it.

or you can also try :

img {
     max-width:100%; max-height:100%; margin:auto;
}

more