您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

实现div垂直居中的display:table-cell方法示例介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!)

  ie8以及以后版本可以识别!

  ie7和ie6能识别vertical-align:middle;

  如果盒模型中间只有几段文字的话,设置line-height就可以实现居中显示了!

  如果要实现盒模型中的div居中,可以参考以下代码:

  div#wrap {

  display: table;

  border: 1px solid #FF0099;

  background-color: #FFCCFF;

  width: 760px;

  height: 400px;

  *position: relative;

  overflow: hidden;

  }

  div#subwrap {

  vertical-align: middle;

  display: table-cell;

  *position: absolute;

  *top: 50%;

  }

  div#content {

  *position: relative;

  *top: -50%;

  }

  效果:

实现div垂直居中的display:table-cell方法示例介绍 三联

  这个是多浏览器兼容的,但是得写几层div~ 但是想在层或img在层