css垂直水平居中的整理

方法一

.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo1 img { vertical-align:middle;}

注意：如果不能居中，在img前面加一个空格。

方法二

.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}
.demo2 img { vertical-align:middle;}

方法三

.demo3 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo3_inner img { position:relative; top:-50%; left:-50%;}
.demo3 >/**/ .demo3_inner { position:static;}
.demo3 >/**/ .demo3_inner > img { position:static;}

如果要放文字

如果是文本,需要添加一标签来实现，我这里添加的是p。

.demo4 { display:table; position:relative; text-align:center; height:180px; width:180px; border:1px solid #ddd;}
.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}
.demo4_inner p { position:relative; top:-50%; left:-50%;}
.demo4 >/**/ .demo4_inner { position:static;}
.demo4 >/**/ .demo4_inner > p { position:static;}

我测试过的且兼容的浏览器有：IE6+,Opera,Firefox,Safari,chrome，希望各位朋友帮忙测试其他浏览器。