今天小编跟大家讲解下有关CSS 实现未知内容高度的垂直水平居中(改良版) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS 实现未知内容高度的垂直水平居中(改良版) 的相关资料，希望小伙伴们看了有所帮助。
垂直居中在IE浏览器下的实现比较难实现 而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良 兼容FF IE6 IE7 Opera...如发现问题有劳回复评论！ 复制代码代码如下:<mce:style><!-- *{margin:0;padding:0;border:none;font:12px Verdana,"宋体";} #outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;} #middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;} #inner{*position:relative;*top:-50%;text-align:center; background:#F00;} #inner img{vertical-align:middle;*position:relative;*top:-1px;} --></mce:style><style mce_bogus="1">*{margin:0;padding:0;border:none;font:12px Verdana,"宋体";} #outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;} #middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;} #inner{*position:relative;*top:-50%;text-align:center; background:#F00;} #inner img{vertical-align:middle;*position:relative;*top:-1px;}</style> <body> <div id="outer"> <div id="middle"> <div id="inner"> <!--可以放任何文本标签<p/>等或者图片标签<img/>--> </div> </div> </div> </body>来源：爱蒂网
