CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
一、单行垂直居中
p { height:30px; line-height:30px; width:100px; overflow:hidden; }{ height:30px; line-height:30px; width:100px; overflow:hidden; }
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
二、box方法实现水平垂直居中（有一定的兼容性问题）
<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>
.center {width: 300px;height: 200px;padding: 10px;border: 1px solid #ccc;background:#000;color:#fff;margin: 20px auto;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;}{width: 300px;height: 200px;padding: 10px;border: 1px solid #ccc;background:#000;color:#fff;margin: 20px auto;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;}
注意：display:table-cell;存在火狐浏览器兼容性问题，不建议使用。可以用position进行处理：例子：<style>table,td{border: 1px solid #ddd;}.td-description {height: 37px;width: 750px;/*父元素定位*/position: relative;}.duty-description {overflow: hidden;/*子元素绝对定位*/position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;max-height: 37px;}</style><body><table><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： ⑴不泄露党和国家秘密。 ⑵不在无保密保障的场所阅办、存放密级文件、资料。 ⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 ⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 ⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 ⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 </div></div></td></tr><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育</div></div></td></tr></table>table,td{border: 1px solid #ddd;}.td-description {height: 37px;width: 750px;/*父元素定位*/position: relative;}.duty-description {overflow: hidden;/*子元素绝对定位*/position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;max-height: 37px;}</style><body><table><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： ⑴不泄露党和国家秘密。 ⑵不在无保密保障的场所阅办、存放密级文件、资料。 ⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 ⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 ⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 ⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 </div></div></td></tr><tr><td><div class="td-description"><div class="duty-description" >机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育</div></div></td></tr></table>
