Question

I know this is a noob-ish question but is it possible to fully center an image to the absolute center of a webpage no matter how much the page/window is changed using CSS? I’m working with a simple tag and I need to know how to? I’ve been looking around Google but I’m not getting any relevant results, probably due to my lack of correct phrasing…

I need it centred both horizontally and vertically.

Thanks!

Answer 1

To centre elements:

.className {
    width:200px; /*Set to image width*/
    height:100px; /*Set to image height*/
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px auto auto -100px; /*Half of image width, 0, 0, half of image height*/
    text-align:center;
}

HTML:

<img src="whatever.jpg" class="className" />

JSFiddle:

http://jsfiddle.net/Mutant_Tractor/xBRq9/