css垂直水平居中的整理_前端开发-武方博

方法一

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

方法二

.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,希望各位朋友帮忙测试其他浏览器。

返回CSS实例列表

郑州前端开发 郑州网页设计 郑州美工 郑州UED 郑州div+css 郑州页面重构 武方博前端开发 前端开发武方博 站点地图