Alexander Reshytko Alexander Reshytko - 1 year ago 51
CSS Question

Bootstrap center an image inside the div but without resizing

I need to place the image inside the div. I know there are img-responsive center-block classes but they resize the given image for some reason. Is there a way to achieve the same goal but without size distortions.

Note: the containing div is a bootstrap column with given classes: hidden-xs col-lg-9 col-md-6 col-sm-6.

Thank you

Answer Source

CSS is my friend

can you try this CSS class


 <img class="centerd-image" src="">


 <div class="centerd-image">
      <img src="">


.centerd-image {
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);