CSS: Standard (dynamic) way to centralize an element in the y-axis

my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:

margin: auto;

For the x-axis. Any ideas?

I am talking about t开发者_C百科he following piece of code, empty page, align one image in the center.

<div id="main" style="display: block;"> 
    <img style="margin: auto; display: block;" 
    src="http://www.example.com/img.jpg" />
</div>

Any help will be appreciated! :)

Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?

If you know the height of the element that you're trying to center, you can do this:

img {
  display: block;
  height: 500px;
  position: absolute;
  top: 50%;
  margin-top: -250px; /* 50% of your actual height */
}

I know only one way for that:

#mydiv {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px;
   margin-left: -50px;
}

This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)

Additionally you get problems if the element is larger than the browser-window.

The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.

#main {
    position: relative;
}
#main img {
    position: absolute;
    top: 50%;
    margin-top: -(half your image height)px;
}

Here is a variation using vertical-align

http://jsfiddle.net/audetwebdesign/r46aS/

It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).

Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).

However, the good thing is that you don't have to do some math based on the dimensions of the image.

Here are some references related to vertical alignment:

http://css-tricks.com/what-is-vertical-align

http://blog.themeforest.net/tutorials/vertical-centering-with-css

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

and sometimes I have to remember the basics so I reread:

http://www.w3.org/TR/CSS21/visudet.html

This may not solve OP's problem, but may be useful in other contexts.

Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:

<li><a href="../us-hosts.php">
    <img src="../images/us-button.png" width="30" height="30"
         alt="US Hosts" style="vertical-align: middle;"/>&nbsp; US Hosts</a>
</li>

Try this css:

margin-top:auto;
margin-bottom:auto;
display:block;