的网站建设公司网站运营目标
文章参考
http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html
http://www.blueidea.com/tech/web/2006/3231.asp
一、单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
div {
height:25px;
line-height:25px;
overflow:hidden;
}
二、多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么我们就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已
.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}
优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
三、使用table居中对齐的方式
但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素
.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
备注说明：表格是可以左右自动等高的，所以当一侧的内容增多时，两侧都会自动等高。
例子
<style type="text/css">
.line_height_1{
border: 1px solid red;
width: 500px;
height: 200px;
line-height: 200px;
}
.padding_div{
border: 1px solid blue;
padding : 50px 0px;
width: 200px;
}
.div_table{
display: table;
}
.div_cell{
display: table-cell;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="line_height_1" >
单行内容垂直居中使用line-height 与 height属性的值一致即可
</div>
<p>
<p>
<div class="padding_div">
1、保证div上下padding一致<br>
2、div里面的内容是不确定的，高度会被内容撑开<br>
</div>
<p>
<p>
<div class="div_table">
<div class="div_cell" style="vertical-align: middle">
垂直居中的内容
</div>
<div class="div_cell">
随机的内容<br>
随机的内容<br>
<span style="color: red">IE6 不支持display:table</span><br>
随机的内容<br>
随机的内容<br>
随机的内容<br>
</div>
</div>
</body>