image in center horizontally and vertically

[jtaporco]

if i wanted to center an image dead center in the browser horizontally and vertically how would i do that in css. i tried w3 but i couldnt find anything there or google.

Thanks!

[pallmathu]

hi i dont know these thigns but i think i can guess.

use both CSS and Javascript

find browser window size (width and height)in page load event

image_display_hpixel=(browser width -image width)/2
similarly height
then set the off set of image u get from above calculation

once again i am not a coder or a designer but been with some so tring to make a guess

let me know if it works

[deceylon]

I think no need of Jscripts,
You can done it with CSS.

[seolady]

yes, you could do that in css. try this for code:

.dead_center_class{
position: absolute;
top: 50%;
left: 50%;

}

the name for the class (in red) is just an example you can change it. And i havent used the "%" yet but i think its valid, based from w3schools here, you can try their example at:
http://www.w3schools.com/css/tryit.a...on_top_percent

[deceylon]

Yes w3schools has good tutorials.
their forum also very important.

[webcosmo]

One thing you have to do is for the body css use 100% height. Without doing that browsers have flow height by default.

The for positioning I think you can use the css mentioned above
.dead_center_class{
position: absolute;
top: 50%;
left: 50%;

}

[PixelPerfectDesigner]

Originally Posted by seolady

yes, you could do that in css. try this for code:

.dead_center_class{
position: absolute;
top: 50%;
left: 50%;

}

the name for the class (in red) is just an example you can change it. And i havent used the "%" yet but i think its valid, based from w3schools here, you can try their example at:
http://www.w3schools.com/css/tryit.a...on_top_percent

This block of code alone won't work! It will put the top left corner of the image in center but not the image in center!

[3ncryptabl3_lick]

This is what I have, placed before the </head> to center my flash site vertically and horizontally in the body:

</script>
<style  type="text/css">
<!--
 html,body {
       margin: 0;
       padding: 0;
 }
 table {
       width: 100%;
       height: 100%;
 }
 td {
       align: center;
       vertical-align: middle;
 }
 div.container {
       position: relative;
       margin-left: auto;
       margin-right: auto;
       width: 870px;
       height: 600px;
 }
 -->
</style>

But I didn't write it, my coder did so I can't support you if it doesn't work for you. Also, you'll have to change the width:870px and height: 600px to match the width and height of your image.

[water2filter]

It is better to control by CSS. however if you donot understand CSS, you can do by table.