为什么在火狐可以水平垂直居中，Chrome中就不行？
本帖最后由 ppsharp 于 2013-12-31 00:23:46 编辑 代码如下，图片在火狐中可以水平居中，也可以垂直居中，但是在Chrome中只能垂直居中，不能水平居中。我搞了好久都找不到解决方法，大家帮我看看，谢谢了！
注：javascript:DrawImage(this, 300, 300) 是一个等比例缩小放大的函数。
<!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>Test</title>
<script src="lib/js.js" type="text/javascript"></script>
<style type="text/css">
#a
{
width: 300px;
height: 300px;
margin: 10px;
display: table-cell;
border: 1px solid red;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
#b
{
width: 300px;
height: 300px;
padding: 2px;
display: table-cell;
border: 1px solid #DDDDDD;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="a" >
<a href="#"><img src="1.jpg" onload="javascript:DrawImage(this, 300, 300)" /></a>
</div>
<div id="b">
<img src="1.jpg" onload="javascript:DrawImage(this, 300, 300);" />
</div>
</body>
</html>
#a img ,#b img{width:200px;height:200px}<div style = "border:1px solid #aaa;width:500px;height:400px;">
<div style = "width:200px;height:200px;margin:0 auto;background:#eee;">
</div>
</div>