解决这个问题有多种方法
1.使用css hack 处理ie6下的问题。
2.嵌入其它标签使其垂直居中。
方法一：
.box{
/*非IE的主流浏览器识别的垂直居中的方法*/
display:table-cell;
vertical-align:middle;/*设置水平居中*/
text-align:center;/*针对IE的Hack*/
*display:block;
*font-size:175px;/*约为高度的0.873，200*0.873约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border:1pxsolid#eee;
}
.boximg{
/*设置图片垂直居中*/
vertical-align:middle;
}
<divclass="box">
<imgsrc="/jijialong/pic/item/174b99ff9511937a4e4aea71.jpg"/>
</div>
这种写法可以实现，有一种情况是："box"如果是浮动元素的话{float：left}，这个方法就不灵验了！
可以给img标签外加一个容器，和浮动float就木有关系了。
.box{
/*非IE的主流浏览器识别的垂直居中的方法*/
display:table;
text-align:center;/*针对IE的Hack*/
width:200px;
height:200px;
border:1pxsolid#eee;
}
.box span{
display:table-cell;
vertical-align:middle;
}
<divclass="box">
<span><imgsrc="/jijialong/pic/item/174b99ff9511937a4e4aea71.jpg"/></span>
</div>
方法二：
<style type="text/css">
.miao {
width:500px;
height:220px;
line-height:220px;
border: 1px solid;
text-align: center;
}
.miao img {
vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.miao span {
border: 1px solid red;
height: 100%; /* 要保证和父元素高度一样才行 */
writing-mode: tb-rl;
vertical-align: middle;
}
</style>
<![endif]-->
<div class="miao"><img src="/images/default/logo.gif" alt="Logo" />文字部分去掉，图片受影响</div>
如果把文字去掉的话，图片不会垂直居中。
此种方法图片的垂直居中是以“基线”垂直居中，因为line-height的存在，图片默认的基线是底部,img需要给一个属性vertical-align:middle;
方法三：
<styletype="text/css">
.img_v{
display:table-cell!important;
display:block;
position:static!important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1pxsolid#000;
vertical-align:middle;
text-align:center;
}
.img_vp{
display:table-cell!important;
display:block;
margin:0;
position:static!important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_vimg{
position:static!important;
position:relative;
top:auto!important;
top:-50%;
left:auto!important;
left:-50%;
}
<divclass="img_v">
<p><imgsrc="/images/logo.gif"></p>
</div>
方法四：
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>
<![endif]-->
<div class="miao">
<span><img src="/images/default/logo.gif" alt="Logo" /></span>
</div>
方法五：
<!DOCTYPE html>
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="/intl/en/images/logo.gif" /></p></div>
方法六：
<style>
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src="/intl/en/images/logo.gif"/></p></div>
方法七：
<style>
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
</style>
<div><p><img src="/intl/en/images/logo.gif" /></p></div>
方法八：
<style>
* {margin:0;padding:0;}
div {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*>div{
font-size:12px
}
div img {
vertical-align:middle
}
</style>
<div>
<img src="/intl/en/images/logo.gif" />
</div>
方法九：
<style>
div {
display:table-cell;
height:300px;
width:500px;
text-align:center;
border:1px solid #000;
vertical-align:middle
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<div>
<i></i>
<img src="/img/logo.gif" alt=""/>
</div>
了解了才知道 上边写的都是什么啊 ， 之后抽个时间修改一下
使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
