多行文字实现垂直居中 css3

用到的属性： display:table-cell;　　verical-align:middle;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 多行文字实现垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body { font-size:12px;font-family:tahoma;}
        div#wrap {
            height:400px;
            display:table;
        }
        div#content {
            vertical-align:middle;
            display:table-cell;
            border:1px solid #FF0099;
            background-color:#FFCCFF;
            width:760px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <P>现在我们要使这段文字垂直居中显示！

        </P>
    </div>
</div>
</body>
</html>

下面看 display 的各个属性：

常用display
1、div{display:block} 有换行作用。
案例：图片做背景，隐藏图片上文字http://www.divcss5.com/jiqiao/j55.shtml

2、div{display:None } 隐藏对象及对象内容。
案例：CSS隐藏HTML内容 http://www.divcss5.com/jiqiao/j55.shtml

3、div{display:Inline } 在一排显示。
代表案例，对li列表默认一排显示li{display:Inline }

参数：

block :块对象的默认值。用该值为对象之后添加新行
none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
table-caption :将对象作为表格标题显示
table-cell :将对象作为表格单元格显示
table-column :将对象作为表格列显示
table-column-group :将对象作为表格列组显示
table-header-group :将对象作为表格标题组显示
table-footer-group :将对象作为表格脚注组显示
table-row :将对象作为表格行显示
table-row-group :将对象作为表格行组显示