Stubborn craziness: centering an image horizontally and vertically with CSS in IE7

So, I’ve been telling everyone how learning CSS is totally worth it and not as hard as it seems. But today I spent probably 2 hours trying to get one simple image vertically aligned without using a table. I should have just put in a table, but I’m crazy stubborn. I guess it was educational… The breakthrough was finding this site for vertical centering, but then I had a hard time making it center horizontally too. You can see the ultimate solution at Jonathan’s new website (just a forwarder right now, so the code is simple), but here it is for anyone searching. There are a zillion solutions out there, which SEEM to be collected at SuzyUK’s thread, but I couldn’t get any of those to work for me. I fully admit my approach to CSS still has a lot of superstition!

Style sheet:

body {
    background-color: #000000;
    margin: 0;
    padding: 0;    
#outer {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position: fixed;
     display: table;    
#middle {
    display: table-cell;
    height: 540px;
    vertical-align: middle;
    text-align: center;
img {    
    border: 0;        
    margin: 1em auto;    

<!--[if IE]>
<mce:style type="text/css">
#middle {
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto
#inner     {
        position: relative;
        top: -50%;
        left: -50%;

and the code:

<div id="outer">
<div id="middle"> 
<div id="inner">
 <a href=""> 
<img title="Click to enter" src="JCEcom.jpg" alt="Jonathan Caws-Elwitt, humorist and playwright" width="720" height="540" />