Centering images in iframes

I have an iframe <iframe src="preloader.gif" id="graphFrame"...></iframe> . I would like to centre the ima开发者_如何学Pythonge inside the iframe. I have tried looking up solutions online but none of them work. Can this be done with simple css? If not, is there another solution?

No, you're serving an image not an html page so CSS doesn't apply.

Its going to act like a preloader image so when the actual content loads it will superimpose over the preloader image

That being the case I'd suggest that you:

1. Make the iframe's background transparent by setting allowTransparency="true" That property-name is case-sensitive in Internet Explorer iirc.
2. Apply the following styles to the iframe:

   background-image: url('preloader.gif');
   background-position: center center; background-repeat: no-repeat;

3. Park the src on an html page with a transparent background

   html, body {
     background-color: transparent;
   }

Once the content loads in the iframe it'll cover the loading image. Working Example

I needed to center an image in an iframe, and I couldn't get CSS to do anything, so instead of loading the image itself, I put the image in a small html page with an inline style on the body tag of padding:0; margin:0; and loaded that into the iframe instead. Centered it perfectly with no borders around the edges!

Of course, I made the iframe height and width the same as the image's height and width.