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

最新推荐文章于 2025-08-13 18:53:35 发布

林愿星

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量1.2k

点赞数

分类专栏：网页设计文章标签： css border ie div 浏览器

网页设计专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种在不同浏览器下实现未知内容高度垂直水平居中的方法。通过使用特定的CSS样式，该方案能够良好地兼容FF、IE6、IE7及Opera等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

垂直居中在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 id="outer"> <div id="middle"> <div id="inner">  </div> </div> </div> </body>

原文地址http://www.html-css.cn/css/44.html