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

时间：2021-05-08

ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！）
ie8以及以后版本可以识别！
ie7和ie6能识别vertical-align:middle;
如果盒模型中间只有几段文字的话，设置line-height就可以实现居中显示了！
如果要实现盒模型中的div居中，可以参考以下代码：
CSS Code复制内容到剪贴板

  • div#wrap{
  • display:table;
  • border:1pxsolid#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~ 但是想在层或img在层中垂直水平居中该怎样做呢？下一篇会涉及到。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章