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>