css控制图片水平垂直居中

本是公司一道考试题目，发现牵扯的面挺多的，特此总结下：

一、图片水平居中较为简单，只需在容器的css中设置：

text-align:center;

二、分别有N种方法实现

1、将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

#rightdiv{           //container  height:895px;  width:90%;  float:right;  background-color: #EEE;  display: table;  text-align:center;}#rightdiv span{  display: table-cell;  vertical-align: middle;}

兼容IE7写法：

#rightdiv{    position:relative;    overflow:hidden;    height:840px;    width:88%;    float:right;    background-color: #EEE;    display: table;    text-align:center;}#rightdiv span{    position:absolute;    left:50%;top:50%;}#rightdiv img{    position:relative;    left:-50%;top:-50%;}

2、三层div嵌套，将图片放在最内层

html代码如下：

<div id="rightdiv">    <div id="tablecell"><div id="centerblock"><img src="imgs/blink.jpg"/></div>     </div> </div>

css代码如下：

#rightdiv{  height:900px;  width:89%;  float:right;  background-color: #EEE;  position: relative;}#tablecell{  display: table-cell;  vertical-align: middle;}#centerblock{  width: 50%;  margin: 0 auto;}#rightdiv img{  margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0;}

3、利用国外大神的绝对定位方式：盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

4、给img元素包一层div即可，设置其div的行高line-height等于高度height，然后利用vertical-align:middle

div{     margin-top: 50px;     height: 400px;     line-height: 400px;     text-align: center;     background-color: #A2A590;}div img{    vertical-align: middle;}

待完善。。。