（转载）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;}

文字

.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;}

 

转载于:https://www.cnblogs.com/jdsm/p/3522754.html