Css实现元素的垂直居中

在Css中尽管有vertical-align这个特性,但并未能解决所有的垂直居中问题,比如位置高度元素的垂直居中。下面列出一些实现元素居中的方法:

使用table实现元素的居中:

实现元素垂直居中的最简单方式应该就是利用table中设置单元格的 vertical-align:middle 了：

css代码如下：

.data-sheet td{ vertical-align:middle;}

html代码如下：

<table class="data-sheet">  <tr><td>vertical centering using css</td></tr></table>

使用margin:

另一种简单居中实现是在已知包含容器元素与内容元素高度的条件下，使用 margin 来实现内容元素的居中。 例如，已知有 height : 400px 的容器元素，其包含有 height:150px 的图片元素，此时只需设置图片元素的margin-top值为125px[ (400px - 150px) /2 ]即可。利用margin实现元素的居中比其他居中的方法兼容性叫好，所以在条件允许的情况下尽量使用这种方法来实现。

使用line-height

假设需要实现一小段文本的垂直居中，此时可以使用 line-height 来实现居中，设置包含容器的height与 line-height 为同样的值：

css代码如下：

.text{  width:14em;height:8em;line-height:8em;  margin:0.5em;border:thick solid;background:#fff;}

html代码如下：

<div class="text">  <span>Some  Text</span></div>

这个方法在主流浏览器上都可以完美地实现，但是，当文本换行时此方法就失效了。

但是，实际应用中难免会碰上条件不是那么充足的情形。当内容元素的高度未知时，实现兼容主流浏览器的居中方法较为繁琐，如下：

 

兼容主流浏览器，使用position:relative与负margin:

这个方法实现原理是通过在最外层包含容器内再添加一个容器元素,并设置其position:absolute;top:50%;之后再通过设置内容元素position:relative;top:-50%;来实现：

css代码如下：

#outer {  height: 100%; overflow: hidden; position: relative;  width: 100%; background:ivory;}#outer[id] {display: table; position: static;}#middle {position: absolute; top: 50%;}#middle[id] {  display: table-cell; vertical-align:  middle; position: static;}#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;}div.greenBorder {border: 1px solid green; background-color: ivory;}

html代码如下：

<div id="outer">  <div id="middle">    <div id="inner" class="greenBorder"></div>  </div></div>

以上各方法兼容IE、Firefox、Opera等浏览器。

对于标准浏览器使用display:table:

对于标准浏览器实现元素的居中可以说简易的多，就是使用table单元格居中的原理来实现，通过设置包含容器元素display:table以及display:table-cell，并设置垂直分布为居中vertical-align:middle：
css代码如下：

#outer {display: table; }#middle {display: table-cell; vertical-align: middle;}

html代码如下：

<div id="outer">  <div id="middle"><img src="xxxx.gif" alt="xxxx" /></div></div>

参考资料:

• CSS解决未知高度垂直居中 - 蓝色理想
• Vertical centering using CSS