首页 > 代码库 > 固定高度的多行文字垂直居中
固定高度的多行文字垂直居中
假设有一个高度为100px的 div，在这里放一行文字，垂直居中显示，这个大家都会，line-height设置为100px即可！那如果有两行、三行......多行呢？还能通过 line-height 解决么？答案很明显不能！下面一起来看下：
方法：
一、HTML结构
<div class="wrap"> <div class="subwrap"> <div class="content">aaaaa<br>bbbbb<br>ccccc</div> </div></div>
二、CSS
.wrap{ display:table; border:1px solid #FF0099; background-color: #FFCCFF; width:760px; height:400px; *position:relative; overflow:hidden; } .subwrap{ vertical-align:middle; display:table-cell; *position:absolute; *top:50%; } .content{ *position:relative; *top:-50%; }
说明：
1. diaplay:table; display:table-cell; 用类似表格的方式实现垂直居中（仅对除IE7以后的浏览器）
2. 带有星号的样式针对IE6和IE7，这两怪胎不支持table方式，但办法总比问题多一个，可以对父级元素绝对定位 top:50%;然后在对子元素定位top:-50%,这样可以正好重叠了。
固定高度的多行文字垂直居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。