CSS 实现未知内容高度的垂直水平居中(改良版)

发布时间：2016-12-27 来源：查字典编辑

摘要：垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了...

垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera...如发现问题有劳回复评论！

<mce:style><></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>

</body>