有关 HTML 水平垂直居中问题的讨论

zachary.guo

浏览: 487831 次
性别:
来自: 深圳

最近访客更多访客>>

pjmike

quiii

yxfxueying

zx3243994

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML + CSS

HTML Chrome 浏览器 CSS Firefox

        关于 HTML 水平垂直居中问题，网上的讨论已经是相当地多了。这里，我把网上搜索的结果，并附加上解题思路，总结出来，希望对大家有所帮助。

        首先，我们需要明确一个概念，到底是谁要相对于谁水平垂直居中，相应的样式应该写在谁的里面。这里，我们统称为：inner element 相对于 outer element 水平垂直居中。下面首先讲到的是文字在 div 中居中，这个不属于这个范畴。因为盛放文字的 div 若是置于其它的 div(outer div) 中，而且文字 div 要整体相对于这个层居中，这才是我们要讨论的话题。这个时候，盛放文字的层就是 inner element，它所相对于的那个层居中的元素就是 outer element。

        我们首先先看看如何使得某段文字处于 div 水平和垂直方向的中间，下面分情况来讨论。

        1. 单行文字
        单行文字，有两种情况：① div 的高度显示指定；② div 的高度未指定。对于 ②，文字的字体大小就决定了 div 的高度，此种情况没有必要讨论。对于 ①，只需要将 line-height 的值设置的和 height 值一致即可。至于宽度，没指定，写多少字就多宽，指定了宽度，设置 text-align 为 center 即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div {
    /* 为了看清 div 的轮廓，我给 div 加上边框 */
    border: 1px solid black;
    width: 400px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 12px;
  }
</style>

<div>我确保这段文字就只有一行。</div>

2. 多行文字(div 的高度未知)
这种情况，div 的高度是随文字的多少而变化的。只需设置 padding 值即可，看你需要 padding 多少了，比较随意。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div {
    /* 为了看清 div 的轮廓，我给 div 加上边框 */
    border: 1px solid black;
    width: 400px;
    font-size: 12px;
    padding: 20px;
  }
</style>

<div>&nbsp;&nbsp;&nbsp;&nbsp;如果一段内容，它的高度是可变的那么我们就可以使用使得上下的 padding 值相同的方法即可。同样的，这也是一种 "看起来" 的垂直居中方式，它只不过是使文字把 div 完全填充的一种访求而已。</div>

3. 多行文字(div 的高度指定，即固定高度的 div)
CSS 中的 vertical-align 属性只会对拥有 valign 特性的 (X)HTML 标签起作用，但是在 CSS 中还有一个 display 属性能够模拟 <table>，所以我们可以使用这个属性来让 <div> 模拟 <table> 就可以使用 vertical-align了。注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个 <div> 元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    /* 为了看清 div 的轮廓，我给 div 加上边框 */
    border: 1px solid black;
    width: 400px;
    height: 300px;
    overflow: auto;
    font-size: 12px;
    display: table;
  }
  
  div.inner {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
  }
</style>

<div class="outer">
  <div class="inner">
    &nbsp;&nbsp;&nbsp;&nbsp;CSS 中的 vertical-align 属性只会对拥有 valign 特性的 (X)HTML 标签起作用，但是在 CSS 中还有一个 display 属性能够模拟 table，所以我们可以使用这个属性来让 div 模拟 table 就可以使用 vertical-align了。注意，display:table 和 display:table-cell 的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个 div 元素。
  </div>
</div>

这个方法应该是很理想了，但是不幸的是，只有标准浏览器中(FF，Opera, Safari，IE8 等)才能正确地理解 display:table 和 display:table-cell，因此这种方法在不支持 W3C 标准的浏览器(IE6 和 IE7)下是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

在不支持 W3C 标准的 IE 浏览器中，在高度的计算上存在着缺陷的。对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度)。例如，我们有下面这样一个(X)HTML代码段：

<div id="outer"> 
 <div id="inner"> 
   <div id="content"></div> 
  </div>
</div>

现在，outer 层就是我们的大容器，在 Firefox，Chrome 等现代浏览器中，使用两个层(包括外围的容器层)，并使用 display 和 vertical-align 属性即可垂直居中。这里，IE6 和 IE7 需要三个层(包括外围的容器层)。outer 层的宽高度已知，content 层的高度未知，因为我们不知道 content 层要写多少文字，所以我们引入了 inner 层，它将 content 层包裹起来，这样，content 层里有多少文字，那么，inner 层的高度就和 content 层的高度一样(这还依赖于它们各自 position 的设置)，都为文字占用的高度。不过，我们仍然要记住，inner 层和 content 层的高度是未知的。我们使 inner 层的 position 为 absolute(若为 relative，那么 inner 层的宽度将继承 outer 层的宽度，这不是我们想要的效果，我们要的效果是和 content 层一致的宽高度)，top 为 50%，那么，inner 层的左上角位于 outer 层垂直方向上的正中间(50% 是根据 outer 层的高度来计算的，计算的基础是它父亲元素的高度)。这个时候，我们只需要将 content 层的位置向上偏移 content 或 inner 层的高度的一半即可。可惜，我们并不知道它们的高度。这就是为什么我们要引入三个层的原因了。由于 innner 层的 position 为 absolute，如果 content 层的 position 也为 absolute，那么 inner 层将没有高宽度，我们只能使 content 层的 postion 为 relative，只有这样，inner 层和 content 层才会有相同的高宽度。在 content 层上设置 top 为 -50%，那么它就是按 outer 层的高度来计算了。这样就达到我们的目的了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    border: 1px solid black;
    width: 600px;
    height: 400px;
    font-size: 12px;
    /* 或者 position: absolute; */
    position: relative;
  }
  
  div.inner {
    /* 必须的 */
    position: absolute;
    top: 50%;
  }
  
  div.content {
    /* 必须的 */
  	position: relative;
  	top: -50%;
  }
</style>

<div class="outer"> 
 <div class="inner"> 
   <div class="content">
     &nbsp;&nbsp;&nbsp;&nbsp;现在，outer 层就是我们的大容器，在 Firefox，Chrome 等现代浏览器中，使用两个层(包括外围的容器层)，并使用 display 和 vertical-align 属性即可垂直居中。这里，IE6 和 IE7 需要三个层(包括外围的容器层)。outer 层的宽高度已知，content 层的高度未知，因为我们不知道 content 层要写多少文字，所以我们引入了 inner 层，它将 content 层包裹起来，这样，content 层里有多少文字，那么，inner 层的高度就和 content 层的高度一样(这还依赖于它们各自 position 的设置)，都为文字占用的高度。不过，我们仍然要记住，inner 层和 content 层的高度是未知的。我们使 inner 层的 position 为 absolute(若为 relative，那么 inner 层的宽度将继承 outer 层的宽度，这不是我们想要的效果，我们要的效果是和 content 层一致的宽高度)，top 为 50%，那么，inner 层的左上角位于 outer 层垂直方向上的正中间(50% 是根据 outer 层的高度来计算的，计算的基础是它父亲元素的高度)。这个时候，我们只需要将 content 层的位置向上偏移 content 或 inner 层的高度的一半即可。可惜，我们并不知道它们的高度。这就是为什么我们要引入三个层的原因了。由于 innner 层的 position 为 absolute，如果 content 层的 position 也为 absolute，那么 inner 层将没有高宽度，我们只能使 content 层的 postion 为 relative，只有这样，inner 层和 content 层才会有相同的高宽度。在 content 层上设置 top 为 -50%，那么它就是按 outer 层的高度来计算了。这样就达到我们的目的了。
   </div>
  </div>
</div>

为了将就 IE6 和 IE7，我们不得不使得支持 W3C 标准的浏览器(Firefox, Chrome)也使用三个层来实现居中的效果。我们也只能使用 CSS Hack 来兼容这若干个浏览器了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>
  div.outer {
    border: 1px solid black;
    width: 600px;
    height: 400px;
    font-size: 12px;
    /* 或者 position: absolute; */
    _position: relative;
    
    display: table;
  }
  
  div.inner {
    /* 必须的 */
    _position: absolute;
    _top: 50%;
    
  	display: table-cell;
  	vertical-align: middle;
  }
  
  div.content {
    /* 必须的 */
  	_position: relative;
  	_top: -50%;
  }
</style>

<div class="outer"> 
 <div class="inner"> 
   <div class="content">
     &nbsp;&nbsp;&nbsp;&nbsp;为了将就 IE6 和 IE7，我们不得不使得支持 W3C 标准的浏览器(Firefox, Chrome)也使用三个层来实现居中的效果。我们也只能使用 CSS Hack 来兼容这若干个浏览器了。
   </div>
  </div>
</div>

文字处于 div 的中间的问题我们已经讨论完了，现在，我们要将盛放文字的层视为 inner element。我们现在要使文字层处于这个页面的正中间，这个时候，body 就是我们的 outer element 了。

这种情况，由于 inner element 的宽高度已知(其实，只是盛放文字的 div 高度被设定，文字到底有多少，还是不知道)，我们首先使得 inner element 的左上角位于 outer element 的正中心。此时需要设置 inner element 的 position 为 absolute，使得其 top 和 left 均为 50%。再将 margin-top 设置为 -height/2，margin-left 设置为 -width/2。这样，就达到了我们所要的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      
      div.outer {
        /* 为了看清整个 inner element 的轮廓，这里设置 inner element 的边框为黑色，1px */
        border: 1px solid black;
        width: 600px;
        height: 400px;
        font-size: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        /* margin-left = -width/2 = -600/2 - -300 */
        margin-left: -300px;
        /* margin-top = -height/2 = -400/2 = -200 */
        margin-top: -200px;
        
        display: table;
      }
      
      div.inner {
        /* 必须的 */
        _position: absolute;
        _top: 50%;
        
        display: table-cell;
        vertical-align: middle;
        /* 水平居中 */
        text-align: center;
      }
      
      div.content {
        /* 必须的 */
        _position: relative;
        _top: -50%;
      }
    </style>
  </head>
  
  <body>
    <div class="outer"> 
      <div class="inner"> 
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;这是一段文字，我要使得它们水平垂直居中于页面！这样的代码，在 IE6 和 IE7 下仍然不能很好的支持，而且在这两种浏览器下的效果还不一样，不管啦，只要能支持现代浏览器就行了，懒得为这些浏览器的 bug 折腾了。
        </div>
      </div>
    </div>
  </body>
</html>

事实上，上述计算 margin-left 和 margin-top 的方法并不准确。以 margin-left 为例子，准确的计算方法为：-(border-left + padding-left + width + padding-right + border-right)/2。实际操作时，几像素的差距可以忽略不计，视觉上觉得是居中的即可。若 padding 或 border 设置的值很大的话，就应该考虑精确算法了。

分享到：

jQuery 的原型关系图，让你快速对 jQuery ... | Building Spring 3

2010-06-26 16:04
浏览 5243
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论