# center image on screen



## grammo8 (Nov 23, 2006)

Hi!

I'm working on my website and having serious trouble with something that should be simple (at least I think so). Basically, the idea is that when you enter the site the window goes to fullscreen and there is a fairly small image in the middle of the screen. 

The fullscreen bit I worked out, but centering the image on screen (ie. vertically & horizontally) seems to be difficult. I've googled this but haven't found anything that works.

The last time I built a website was in '95, so I'm a little out of touch...

Any help would be much appreciated!


----------



## Gopaldaas (Sep 13, 2008)

Put this in between the tags

Then between the tags put this
Your contents here


----------



## Eriksrocks (Aug 7, 2005)

That will only center the image vertically.

Here is the code you should be using:


```
#container {
	position:absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 100px;
	margin-top: -50px; /*set to a negative number 1/2 of your height*/
	margin-left: -75px; /*set to a negative number 1/2 of your width*/
}
```
Then simply put your image on the page like this:

```
<div id="container">
<img src="myimage.jpg" />
</div>
```
Here's a live example:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm


----------



## grammo8 (Nov 23, 2006)

Wow, thanks a lot! This is beginning to make sense, will try it asap.


----------



## grammo8 (Nov 23, 2006)

Ah yes, it does work now. 

But what do I do if I decide to add stuff around this centered image, or on top/bottom of the page etc?


----------



## grammo8 (Nov 23, 2006)

Ah yes, it does work now. 

But what do I do if I decide to add stuff around this centered image, or on top/bottom of the page etc?


----------



## Eriksrocks (Aug 7, 2005)

You would probably have to use absolute positioning for them as well. Or, you could put everything you want around the centered image into another div, and center that one as well.


----------



## grammo8 (Nov 23, 2006)

So, I would put the other content into other divs inside the same container as the first, centered image? I mean, in order to fix all the elements to eachother? 

I tried to put stuff into separate containers, which is fine as long as you don't resize the window. But then everything starts kind of overlapping when I make the window smaller, which looks very crappy. 

Man, this is all pretty frustrating for someone who is used to print design...


----------



## Eriksrocks (Aug 7, 2005)

Yes, there's probably not one specific solution. It depends on what kind of content you have. I would recommend learning CSS because it will help you a lot.


----------



## tomdkat (May 6, 2006)

Eriksrocks said:


> That will only center the image vertically.
> 
> Here is the code you should be using:
> 
> ...


I've been looking for this info as well! :up:

Thanks!

Peace...


----------

