使用CSS简单实现垂直居中

学习一些你已经知道的知识也没有什么坏处，是吧？

我知道这可能并不一定非常有意义，但是很多时候我们往往知其然而不知其所以然，这会使得事情出现惊人的差异。这就是CSS的魅力所在，你可以使用不同的方法实现相同的布局。这样的事情同样也发生在了我的身上，某个礼拜，我发现一个网站使用了一种不同的方法来实现居中布局，而这种方法对我们大家来说早已是都是很熟悉知的简单技术了。的确，可能对于大家很多人来说这种方法早已采用过，但是直到今天它起了我的注意。

传统做法：

我学到的第一个CSS知识就是如何把一个固定宽度和高度的元素水平或者垂直居中。这些居中的内容可能是入站欢迎页面（Splash　Page　http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html）中图片，或者是一些设计喜欢的居中设计的网站等。最原始的解决办法就是把元素在窗口中距左和距上边缘进行50％的绝对定位。当然这只是把元素的右上角移动到了窗口的中央，接下来你还需要设置负的margin-left和margin-top并且使它们的值刚好是宽和高的一半来把元素拉加到屏幕的中央。

让我们看一下旧式做法的例子并注意一下其中的不足：

html,body{   
    height:100％;   
  margin:0;   
 padding:0;   
}   
body{   
  background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;   
    text-align:center;   
    min-width:626px;   
  min-height:400px;   
}   
#vert-hoz{   
  position:absolute;   
    top:50％;   
  left:50％;   
 margin-top:-198px;/* half elements height*/  
   margin-left:-313px;/* half elements width*/  
   width:624px;   
  height:394px;   
 border:1px solid silver;   
  background:#666;   
  overflow:auto;/* allow content to scroll inside element */  
    text-align:left;   
}   
h1 {color:#fff;margin:0;padding:0}  
<div id="vert-hoz">  
 <h1>Content goes here</h1>  
</div>  

效果如下图：

图1

为了页面美观起见我给各元素添加了一些背景颜色，这里我们真正感兴趣的是灰色居中部分（此外，你应该注意到为了使背景图片居中你应该设置html、body的高度为100％）。

如图1所示，这个结果正题我们想要的，元素在水平和垂直方向上都完美地实现了居中。文章中已经提到，对元素绝对定位使其top和left值都为50％，然后使用负的顶部填充和左侧填充并使填充的值为高和宽的一半。

尽管看起来没有什么问题，但是使用这种方法存在几个严重的不足，水平或者垂直缩小窗口你就会发现这个问题了。当窗口缩小到比元素还要小时，元素就会开始从窗口的上部和左侧滑出。滑出的部分即使是使用窗口的滚动条也无法可见。这就意味着使用较小屏幕的用户根本看不见这些内容。

图2显示了当窗口缩小时例子中单行文本发生的变化。

图2

文本上部有一半丢失，左侧也有一部分不见了。如果我们进一步缩小窗口，整个文本会完全消失。为了达到我们最初的目的，试着给body增加min-height和min-width属性，但是你会发现这根本没有任何效果，元素依然会滑出窗口之外。