div+css实现Firefox和IE6兼容的垂直居中

原创 2007年09月22日 09:04:00

div+css实现Firefox和IE6兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中,还需要 借助于!important标记。Firefox支持!important标记,而IE6忽略!important标记,因此可以使用! important标记区别Firefox和IE6。

[示例代码]

<html>
    <body>
        <div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
            <p>垂直居中,Firefox only</p>
            <p>垂直居中,Firefox only</p>
            <p>垂直居中,Firefox only</p>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative;">
             <div style="position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中,IE6 only</p>
                     <p>垂直居中,IE6 only</p>
                     <p>垂直居中,IE6 only</p>
                 </div>
             </div>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
             <div style="position: static !important; position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中,Firefox IE6 only</p>
                     <p>垂直居中,Firefox IE6 only</p>
                     <p>垂直居中,Firefox IE6 only</p>
                 </div>
             </div>
        </div>
    </body>
</html>

[div+css关键词]

div css

[div+css重要工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&amp;displaylang=en

[div+css的浏览器兼容问题]

水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记,Firefox支持!important标记,IE6忽略!important标记
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

div+css实现Firefox和IE6/7兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6/7中则需要借助IE6/7中css的特点实现垂直居中。为了实...
  • wzhiu
  • wzhiu
  • 2013年02月28日 17:38
  • 1569

div水平垂直居中问题以及解决方法的兼容性

Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中...
  • cyyax
  • cyyax
  • 2016年04月28日 10:18
  • 786

纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1714

IE8中实现垂直居中(兼容IE6、IE7、IE8,Firefox,Chrome等)

投票情况统计:
  • u013561552
  • u013561552
  • 2014年06月27日 00:00
  • 3390

最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中问题变得更加...
  • natalie86
  • natalie86
  • 2015年05月23日 20:12
  • 4089

兼容IE的完全居中布局

代码详见: https://github.com/screamingColor/save/blob/master/test/center.html IE8下的效果: 本文采用绝对定位和flexbox...
  • screaming_color
  • screaming_color
  • 2016年07月10日 15:24
  • 1549

CSS布局——简洁、兼容性强的垂直水平居中方案

1、absolute,需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> ...
  • tangxiaolang101
  • tangxiaolang101
  • 2016年06月24日 11:04
  • 581

html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法

实现图片在容器累垂直居中有多种方法,例如使用计算高度使用margin,透明gif图片+背景定位等等,其中很多方法比较繁琐兼容性也不好,例如用position方法。下面为大家介绍两种比较简洁的方法,一种...
  • chen_gong1992
  • chen_gong1992
  • 2016年11月24日 19:15
  • 450

IE6IE7Firefox浏览器不兼容原因及解决办法

IE6IE7Firefox浏览器不兼容原因及解决办法     一、IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容。同样是font-s...
  • yuwq123
  • yuwq123
  • 2016年08月13日 11:57
  • 1073

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 6031
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: div+css实现Firefox和IE6兼容的垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)