部分可行方案:
1、
<div class="tb-p-c"><img src="test.jpg" /></div>
样式:
.tb-p-c
{display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align:center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img
{vertical-align:middle;
}
这段代码可以帮助实现居中,不过有瑕疵,就是当图片过大的时候在火狐里不会剪切图片,所以要控制图片的高宽<=容器的高宽
2、
<title>完美的水平垂直居中!!--兼容ie6,ie7,ff,opera,safari的水平垂直居中</title>
<style media="screen" type="text/css">
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分两套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效
holder的 position:relative;
holder div的 *position:absolute; top:50%; left:0;
.holder p的 position: relative; top:-50%;
通过控制绝对层的位置实现ie6,7下的垂直居中
holder div中的*position:absolute是只给ie6和7看的css hack
对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中
*/
</style>
</head>
<body>
<div class="wrapper">
<div class="holder">
<div><p><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200803/20080311145849892.gif" /></p></div>
</div>
<div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;">
以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div>
</div>
3、
水平居中对元素本身用margin:0 auto,对父级元素用text-align:center就可以解决。
垂直居中不太好解决。一般可以通过设置上下padding来做
补充:margin:auto 与margin:0 auto效果相同,但margin:0 auto为更规范的写法
居左 margin:0 auto 0 0 居右 margin:0 0 0 auto
4、
适时可使用table(valign:middle)达到效果。