Having trouble vertically aligning a div in the page center with IE

<div id="outer">
	<div id="inner">
	<div style="margin:0 auto;">
	<h1 style="color:#ffffff; margin-bottom:-14px; font-weight:normal; font-family: 'Exo', sans-serif;">Company 1 Title</h1>
	<img src="../../../images/entry_pic1.jpg" alt="Company 1"/>
	<h4 style="color:#ffffff; margin:0; font-weight:normal; font-family: 'Exo', sans-serif;">Blurb about company</h4>
	<div style="float:right;"><img src="linkedin.png" alt="Linkedin" width="18" height="18" style="margin-right:5px;"/><img src="facebook.png" alt="Facebook" width="19" height="18" /></div>
	<span class="homefooter">
	<a href="#">a</a>
	<a href="#">b</a>
	<a href="#">c</a>
	</span>
	<div class="copyright" style="color:#cccccc; font-size:9px;">Copyright <script type="text/javascript">
	copyright=new Date();
	update=copyright.getFullYear();
	document.write('<span style="">');
	document.write(" © ");
	document.write('</span>');
	document.write("2013 - " + update + " " + " ");
	</script> Company xyz : ABN 12354788 : ACN 12585522</div>
	</div>
	</div>
	</div>

.homefooter a:link{ 
			text-decoration:none;  
			color:#dddddd;
			font-size:10px;
			font-family: Arial, Helvetica, sans-serif;
			margin-right:20px;
		}
 
	.homefooter a:hover{  
			color:#4b9ec9;
			font-size:10px;
			text-decoration:underline;
			font-family: Arial, Helvetica, sans-serif;
		}	
	#outer {
	    width: 100%; /* Firefox needs this */
 
	    height: 100%; /* Height can be anything */
 
	    /* WebKit (Chrome & Safari) */
	    display: -webkit-box;
	    -webkit-box-pack: center;
	    -webkit-box-align: center;
 
	    /* Firefox */
	    display: -moz-box;
	    -moz-box-pack: center;
	    -moz-box-align: center;
 
	    /* IE */
	    display: -ms-box;
	    -ms-box-pack: center;
	    -ms-box-align: center;
 
	     /* Native CSS */
	    display: box;
	    box-pack: center;
	    box-align: center;
	}
	#inner {
	    display: table-cell;
	    vertical-align: middle;
	}