1.table表格
<table><tbody> <tr> <td>水平垂直居中的随意内容</td> <td>水平垂直居中的随意内容</td>…类似这样的，
垂直居中对其来说，也是非常简单的事。table cells 的 vertical-align:middle 就可以直接解决。
一行代码：
td{ vertical-align:middle; }
2.display:table-cell实现
复制代码 代码示例:
<div id=”demo”>
<p>水平垂直居中的随意内容</p>
</div>
#demo{ display:table; width:500px; margin:10px auto; background:#eee; }
#demo p{ display:table-cell;vertical-align:middle; height:100px; }
该方法只兼容ie8+.要解决兼容问题的话，可能要用到下面这个通用方法：
html部分
复制代码 代码示例:
<div class="wrap">
<div class="hack">
<div class="cnt">
content
</div>
</div>
</div>
/* CSS 部分的代码实现：整体代码参见上述 demo*/
.wrap{
width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;
*position:relative;
}
.hack{
display:table-cell;vertical-align:middle;
*position:absolute;*top:50%;
}
.cnt{
*position:relative;*top:-50%;
}
3.inline-block实现
复制代码 代码示例:
<div id=”demo”>
<p>水平垂直居中的随意内容</p>
</div>
#demo{
height:100px;
text-align:center;
}
#demo:after{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
content:”;
}
#demo p{
display:inline-block;
vertical-align:middle;
}
垂直方向的对齐排版需使用 vertical-align ，并且只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框） 的，简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。同样的该方法支持ie8+.
用inline-block布局会产生一个间隙的bug，虽然能解决，但是还是不推荐用。
具体解决方法：
复制代码 代码示例:
<div id=”demo”>
<p>这是一个终极实现的水平垂直居中实例</p>
<!–[if lt IE 8]><span></span><![endif]–>
</div>
#demo{
height:100px;
text-align:center;
font-size:0;
}
#demo:after,#demo span{
display:inline-block;
*display:inline;
*zoom:1;
width:0;
height:100%;
vertical-align:middle;
}
#demo:after{
content:”;
}
#demo p{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
font-size:16px;
}
这个方法基本无Bug了，支持ie6+也解决了间隙的bug.
补充方法：定义定位实现未知高度元素的垂直居中（兼容IE5.5678910 firefox chrome）
需要在以上基础上改变HTML结构，把img放在一个元素中间，如下：
复制代码 代码示例:
<div class="box">
<p>
<img src="/nice_mb/08/1c/24769.jpg" />
</p>
</div>
在支持display为table-cell的浏览器中依然用vertical-align:middle来实现，在IE5.5IE6IE7中利用定位来实现垂直居中，具体代码如下：
复制代码 代码示例:
.box {
border: 1px dashed #ccc;
height: 200px;
width: 200px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
*position:relative;
}
p {
*position:absolute;
*top:50%;
width: 100%;
text-align: center;
}
img {
*position:relative;
*top:-50%;
}
实现绝对居中的另类方法
复制代码 代码示例:
<style type="text/css">
.outer{
background:#9F6;
width:100%;
height:400px;
position:relative;
}
.inner{
width:50%;
height:50%;
background:#990;
margin:auto;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
</style>
<div class="outer">
<div class="inner">绝对居中</div>
</div>
兼容性：IE8+、firefox、chrome
注意：这里必须设置height属性才能居中。
