CSS垂直居中的五种方法

HTML&CSS学习

一、表格法

这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

HTML

<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here</div>
</div>
</div>

CSS

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

优点：

content高度可以动态改变，不需要定义content高度；当 wrapper 里没有足够空间时， content 不会被截断。

缺点：

IE中无效，甚至在IE8 beta中也无效，标签嵌套较多。

二、绝对定位法

这个方法使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 50%*content 高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

HTML

<div class="content">Content goes here</div>

CSS

#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

优点

1.适用于所有浏览器
2.不需要嵌套标签

缺点

没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

三、外部包裹法

这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
content 清除浮动，并显示在中间。

HTML

<div id="floater"></div>
<div id="content">
Content here
</div>

CSS

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

优点

适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现

缺点

唯一我能想到的就是需要额外的空元素了

四、固定盒子法

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

HTML

<div class="content"> Content here</div>  

CSS

.content {
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

优点

简单

缺点

1.IE(IE8 beta)中无效
2.无足够空间时，content 被截断，但是不会有滚动条出现

五、单行居中

这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。

HTML

<div id="content"> Content here</div>  

CSS

.content {
    height:100px; 
    line-height:100px;
}

优点

1.适用于所有浏览器
2.无足够空间时不会被截断

缺点

1.只对文本有效(块级元素无效)
2.多行时，断词比较糟糕

总结

总的来说，方法三相对其他的来说算得上是缺点最少的了，因为 content 会清除浮动，所以可以在它上面放置别的元素，并且当窗口缩放时， 居中的content不会把另外的元素盖住。

方法五算得上是个小技巧，可能用得最多，在小元素上面。

实例：

1.li中让文字和图片都垂直居中

<li class="li_tiem">
广州市中级人民法院
<span class="myImg">
<img src="../../images/service_announcement_smallArrow.png" alt="" />
</span>
</li>

#content ul li{
    height:3em;
    line-height:3em;
    list-style-type:none;
    border-bottom:1px solid #e0e0e0;
    padding:0 1em;
}
.myImg{
    display:inline-block;
    vertical-align:middle;
    float:right;
}
.myImg img{
    width:0.5em;
    height:1em;
    vertical-align:middle;
}

解释：在图片外面包裹一个a或者span标签，用div也是可以的，然后设置标签vertical-align:middle;，最后图片也设置为vertical-align:middle;就可以实现图片垂直水平居中了。
至于文字居中，设置line-hight=hight就可以了，相信很多人对单行文本居中还是明白的。

--------碰上合适的较好的例子或方法再更新--------------