图片垂直居中

图生垂直居中有多种方法:

1.图片宽度,高度都小于外面框的宽和高度,不知图片(宽和高)

.xh_b{

       display:table-cell;

       vertical-align:middle;

      //上面两条主要是为了不是IE6浏览器

      *font-size:200*0.873px;

      *display:block;

      *font-family:Arial;

       //防止别的编码,GBK;

      text-align:center;

      width:200px;

      height:200px;

}

.xh_b1 img{vertical-align:middle;//主要是为了IE6}

2.图片宽度,高度都小于外面框的宽和高度,(知道图片宽和高)

.xh_b1 img{position:absolute;top:50%;left:50%;margin-top:-height/2+'px';margin-left:-width/2+'px'}

3.关于水平居中问题

text-align:center;是让文本居中对齐的，但在IE6中对div块级元素使用text-align:center;也能让块级元素居中对齐

margin:0 auto;width:200px;是块级元素居中对齐的例：p,div,ul....

但是有个特殊的元素，iframe元素，此元素应该是块级元素，对此元素使用margin:0 auto;width:200px;不能让此iframe居中对齐，只能对他的父元素使用text-align:center;才能让他居中对齐，把它理解成了文本元素

转载于:https://www.cnblogs.com/xiaohui108/archive/2010/12/21/1913077.html