css各种垂直居中写法总结

1>设置display:table-cell 淘宝font-size法
.box1{ display:table-cell;text-align:center;vertical-align:middle;/ie67垂直居中/font-family:simsun;font-size:200px;}.box1 img{}

2>设置display:table-cell 绝对定位法
.box{ display:table-cell;vertical-align:middle; position:relative;}.box p{position:absolute;top:50%;width: 100%;text-align: center;}.box img{position:relative;*top:-50%;}

3>绝对居中ie8以上支持
.box2{position:relative;}.bd{width:50%;height:50%;margin:auto;position:absolute;text-align: center; left:0;top:0;right:0; bottom:0;border:1px #ccc dashed;}.bd span{vertical-align: middle;line-height: 150px;}

ie8以上支持

4>固定高度的多行文本居中
.box4{line-height: 300px;border: 1px dashed #cccccc;font-size: 0;height: 300px;text-align: center;}.box4 span{display: inline-block;line-height: 24px;vertical-align: middle;font-size: 15px;}

多行文本固定高中垂直居中固定高度的多行文本居中