Yeah, I know that there must be alot of topics about this already.

I did search for some time, but did not find other working solution, but the use of an table.

I want to vertically align login text/form inside 150x150px div. The amount of text may vary and it usually has more lines than one.

Okay, here are the solution proposals I've found so far:

1. make the inner div containing the text top:50% and then margin-top:-(half of its height)px
This will not work because I do not know the height, and I'd surely hate to use js for a simple job like this.

2. make the outer div line height to 150px and then use vertical align in the inner one.
This did not work because the text has more than one line, in my tryouts the second line of text warped quite a bit.

3. Use one cell table to do it.
Yeah, sure, did'nt we just want to get rid of tables in layouts?

sample:
Code:
 
<style>
#outer {
border:1px solid red;
width:150px;
height:150px;
}
#inner {
border:1px solid red;
}
</style>
Both of these should be made vertically aligned at the same time.
<div id="outer">
<div id="inner">
text and form elements that use unknown space
</div>
</div>
<br>
<div id="outer">
<div id="inner">
another text in there
</div>
</div>
No javascript or tables please. I'd prefer it working in all browsers (atleast in ie 5.5+, ne, opera)
Can this be done?