让文本或图片在div容器中垂直居中

最新推荐文章于 2020-08-16 14:35:16 发布

yuanshilao

最新推荐文章于 2020-08-16 14:35:16 发布

阅读量1.8k

点赞数

分类专栏： Xhtml 文章标签： div table html

Xhtml 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种不依赖于表格和margin、padding属性实现元素在父容器中垂直居中的CSS布局方法。通过设置特定的CSS样式，如使用相对定位、绝对定位及table-cell等属性，实现了跨浏览器兼容的解决方案。

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

相信很多朋友在做页面的时候，都会遇到这个问题，而大多数的解决办法不是利用table，就是利用margin，padding属性来达到这种效果。

这个情况是在老外的网上看到的。

Html代码

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

样式表

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */

原文：http://www.student.oulu.fi/~laurirai/www/css/middle/

blueidea上也有详尽的解析：http://www.blueidea.com/bbs/newsdetail.asp?id=2464346&posts=current