Image in Exact Center of Browser Window

[jackli]

Is there a way to perfectly center an image in a browser window using, perhaps, some fancy CSS (but no javascript!)? By “perfectly center,” I mean having the image in the exact center, both horizontally and vertically with respect to the browser window.

(I know of a “fudge-factor” way using tables with two columns, the image in the second one, a bunch of   P-tag’s in the other. But, this doesn’t resize itself automatically if the user changes the window size dramatically.)

[AutisticCuckoo]

img#perfectCentre {
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:200px;
  margin-top:-100px; /* half the height */
  margin-left:-200px; /* half the width */
}

[jackli]

elegant. thanks!