I did not answer the answer in the last phone interview. I will record it today. FF is really hard to do... depressing
I added a lot of HACK. By the way, let's review it!
* + Property: value;/* IE7 */
_ Property: value;/* IE6 */
* Property: value;/* shared by IE6 and IE7 */
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> IE6/7/8/FF vertical center </title>
<Style>
* {Margin: 0; padding: 0 ;}
# Out {display: table; background-color: # F00; width: 300px; height: 300px; _ position: relative; overflow: hidden ;}
# Mid {vertical-align: middle; display: table-cell; _ position: absolute; _ top: 50%;-left: 50% ;}
# In {_ position: relative; _ top:-50%; _ left:-50%; text-align: center ;}
* + Html # out {background-color: # F00; width: 300px; height: 300px; position: relative; overflow: hidden ;}
* + Html # mid {position: absolute; top: 50%; left: 50% ;}
* + Html # in {position: relative; top:-50%; left:-50% ;}
</Style>
</Head>
<Body>
<Div class = "container">
<Div id = "out">
<Div id = "mid">
<Div id = "in"> FF vertical center FF direct center <br/>
FF vertical center F direct center <br/>
FF vertical center F direct center <br/>
FF vertical center F direct center <br/>
</Div>
</Div>
</Div>
</Body>
</Html>
