The dimension of the image is not too large: 600 pixels by 300 pixels. It consists of a blue border at the image's edges and two red lines that indicate the location of the center of the image.
The HTML document
The HTML document that was used for this experiment is shown below.
Some remarks:
The CSS property
position is set to
fixed, so that it doesn't scroll if the browser's content is scrlled
A (
JavaScript event handler (
function resized()) is programmed that is called when the browser is resized. This event handler calbulates the new left and top coordinates of the image.
In order to calculate the new coordinates, the event handler needs also to know the width and height of the image. These values are found in the image's .naturalWidth and .naturalHeight properties.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Center the center of an image on the center of an HTML document</title>
<style type='text/css'>
img {
position: fixed;
}
</style>
<script type='text/javascript'>
var img;
function resized() {
img.style.left = ( (window.innerWidth - img.naturalWidth ) / 2 ) + 'px';
img.style.top = ( (window.innerHeight - img.naturalHeight) / 2 ) + 'px';
}
function main() {
img = document.getElementById('theImage');
window.onresize = resized;
resized();
}
</script>
</head>
<body onload='main()'>
<img id='theImage' src='600x300.png'>
<div>
Lorem ipsum dolor sit amet, elementum tellus feugiat ante ut proin. Lorem vel
sagittis et elit amet, at purus ultrices, wisi mattis in erat urna nunc et,
vitae elementum harum, facilisis ligula nunc ac. Quam urna mauris tortor amet
sodales in, amet diam fermentum vitae dictum sagittis, incidunt leo quam nibh
nulla adipiscing mauris, condimentum nec pellentesque egestas rutrum, id odio
in at cras bibendum. Eget eget tellus, est erat ut aliquam. Integer et vitae
tincidunt dictum nec consectetuer. Justo cras eleifend condimentum, sit nam
nulla vel mauris dolor, neque ac mattis, scelerisque et dolor quis eleifend.
Integer pede vestibulum morbi. Turpis elit et.
<p>
Nulla tellus recusandae magna, est molestiae quisque. Vestibulum ridiculus
purus sapien eu, fermentum augue, faucibus nibh, nunc metus duis at erat.
Lobortis ac turpis, nulla amet et praesent fermentum ultrices, ligula proin
sollicitudin lobortis viverra iaculis aliquam. Libero purus dictum eros
pellentesque wisi, a dignissim urna orci, diam facilisis lectus nullam, tempus
sociis donec justo corporis. Mi sed amet facilisi aliquam nunc gravida, lorem
ac vestibulum voluptatem consequat risus, tristique arcu sem nam nostra, auctor
suspendisse.
<p>
Leo quam interdum ligula nulla, eu nisl phasellus condimentum posuere eiusmod,
condimentum vestibulum doloribus vel ipsum pellentesque. Iaculis laoreet
suspendisse dictum nunc vel integer. Venenatis phasellus praesent nulla
sodales. Velit nec varius nullam, pellentesque dolor elit dui vulputate,
maecenas condimentum elementum sed taciti sociosqu fermentum, sem semper
dignissim, elementum sed leo lorem vitae at adipiscing. Erat duis pede sit, sit
lobortis vivamus, amet pretium sed id arcu, facilisis molestie turpis sociosqu
proin, rhoncus pellentesque. Vehicula sit eget ligula, tincidunt velit, lorem
libero turpis quam gravida vitae, velit eleifend urna occaecat. Ante eros
ultrices posuere, tempus porttitor tempus hac sed neque sed, aliquam metus
magna, tincidunt suspendisse ullamcorper vel mi. Iaculis lorem viverra tellus.
Metus amet mattis risus eros, non nisl sollicitudin mattis commodo nam mauris,
justo facilisis ipsum praesent. Eu molestie nullam et, dictum eu eu, wisi
aliquam nulla sodales mauris ipsum libero, sem placerat. Mi curabitur commodi.
<p>
Sed vitae, elementum bibendum. Turpis fusce eros rutrum sed, etiam sed erat,
fringilla tortor est mauris fermentum, morbi accumsan. At non non, turpis quam
vestibulum lectus suspendisse, aliquet iaculis soluta orci sem ut. Nullam nulla
mollis, vitae commodo eleifend congue accumsan, sit adipiscing vitae interdum
urna dolor, vel perspiciatis sodales ultrices ut. Velit at a. Commodo
vestibulum etiam platea, dui odio quam a leo justo, deleniti tincidunt odio
ligula, pellentesque massa et.
</div>
</body>
</html>
