How to increase the width/height of an image, with the origin staying centered

Question

I have an image:

<img src="my_image.png"/>

And I want it to increase its width and height respectively, but origin should have from center. Because generally when the image size increases, the origin is in the top-left corner.

Answer 1

Hi you can get your desired results through display:table-cell; vertical-align:middle; & text-align:center; see the below code :-

you can increase the width & height as per your requirement image will come in the center.

HTML

<div id="parent">
      <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
    </div>

CSS

#parent {
    display:table-cell;
    width : 700px;
    height : 400px;
    background-color: black;
    vertical-align:middle;
    text-align:center;
}

demo :- http://tinkerbin.com/IZxFN8cH