I'm trying to place an image in the very centre of my page but I cant seem to work out how. I've had a little look online and haven't found anything that could help me.

 

I've used "img.center { display: block; margin-left: auto; margin-right: auto; }" to centre the image horizontally, but I want it to be in the very centre of the page.

 

Can anyone shed any light?

 

Thanks

http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

 

When i copied the css it wasn't in the centre, is that example designed for a certain screen size?

 

I changed the "margin-top"to -100px and "margin-left" to -400px and this seems central on my screen now.

 

Would this mean it would only be central on my screen or is that necessary dues to my image dimensions being larger then the example?

 

I'm reasonably new to all of this, so sorry if these questions seem stupid.

When using position: fixed or position: absolute with top: 50% and left: 50% the margin-top should be negative half the image height and the margin-left should be negative half the image width.