I have a div, with heigth: 300px and width: 600px, which contains an
image which is four times large: heigth 1200px and width 2400px.
I have set overflow: auto to make the image scrolling.

But I am not able to to this thing: when I open the page, I want that
the image in the div appears centered, and not that the left top border
is displayed. In other words, I want that the pointers in the
horizontal and vertical scrolling bars start being in the middle and
not at the begin.

I have tried using position: absolute and setting top and left, but I
have not obtained my hoped result: the image is centered, but then I
anymore cannot scroll it to the top and to the left.

Is there a method to do such a task without using javascript? Thanks.