Getting the image in the centre vertically + horizontally

[Mickster]

Yes, I know what <center> does, so please read before you post.

I want to get an image to go in the center (vertically and horizontally) of the page. To get it vertically I had to cut the image in two, but what do I do to this to get it to center horizontally? This is the code:


<div style="align: center; margin-left: auto; margin-right: auto; width: 600;">
<img src="images/splashpostbetatop.png" style="position: absolute; bottom: 50%;"/>
<img src="images/splashpostbetabot.png" style="position: absolute; top: 50%;"/>
</div>

I've added <center> tags but that pushes it towards the right and not the middle. Help!!

EDIT: This is what it looks like: http://www.tehupload.com/uploads/0595dfdd13c3901htijt.png

[Invent]

<div style="background-image: url( '<your-full-image>.png' ); background-position: 50% center; background-repeat: no-repeat; width: <your-images-width>px; height: <your-images-width>px; position: absolute; top: 50%; left: 50%; margin-left: -( <your-images-width> / 2 )px; margin-top: -( <your-images-height> / 2 )px;"></div>Try that (but make sure to edit the CSS declarations!).

[Mickster]

Just tried it, It makes the image go really far down the page but not in the centre. :P

[Invent]

I made a mistake in my original post - so make sure you are using the code I just changed.

Also, to make sure you're using the code right use this website as an example: www.pixstudios.net

[Mickster]

I made a mistake in my original post - so make sure you are using the code I just changed.

Also, to make sure you're using the code right use this website as an example: www.pixstudios.net (http://www.pixstudios.net)

I'm sure it's right, but now I get this:

http://jewbear.net/img/1222604057223.png

[Invent]

Upload your image and I'll write the code for you.

[Agnostic Bear]

I'm sure it's right, but now I get this:

http://jewbear.net/img/1222604057223.png

imgwidth = width of the image DIVIDED BY 2 (work this out yourself)
imgheight = height of the image DIVIDED BY 2 (^)

margin-left: -imgwidth px;
margin-top: -imgheight px;

put that in your css where the logo is.

That should work.

[Mickster]

I fixed it, never mind. :D