div中多行文字垂直居中

css代码

.name {
    height: 150px;

    width: 150px;
    vertical-align:middle;
    display:table-cell;
}
.shop {
    width: 100%;
    height: 150px;
    margin-top: 15px;
    border:1px solid #E0E0E0;
    text-align: center;
    display:table;
}

　　html代码

<div class="shop">          
            <div class="name">炎帝黄帝站台票-炎帝黄帝站台票-套票</div>
        </div>

　　上述方法是通过用div元素模拟table标签而实现的，注意，display:table和 
display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个div元素，这种方法不能兼容ie7及以下的ie浏览器

 

 

应用实例  

1.html

	<table class="jiameng_list">
				<tr>
					<td class="qiye">
						<div>
							<img src="../../img/companyJoin/qiyeLogo.png" />
							<span>河北省石家庄市九</span>
						</div>
					</td>
					<td class="zhonglei">产品</td>
					<td class="diqu">河北省石家庄</td>
					<td class="jiameng_xuqiu">想找一个带技术的产品，能帮助我们拓客，并能培训员工。要求带有美白祛斑补水功效，欢迎致电！</td>
					<td class="lianxiren">张经理</td>
					<td class="lianxidianhua">13522665002</td>
					<td class="riqi">2018-09-04</td>
				</tr>
			</table>

　　2.css

/*加盟信息list begin*/

.jiameng_list {
border-top: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
/*border-collapse: collapse;
border-radius: 4px;*/
border-collapse: separate;
border-spacing: 0;
border-radius: 4px;
}

.jiameng_list {
margin-left: 60px;
}

.jiameng_list tr:first-of-type td {
height: 35px;
background-color: #F5F5F5;
}

.jiameng_list tr td {
height: 90px;
overflow: hidden;
border-bottom: 1px solid #E6E6E6;
}

.jiameng_list td {
vertical-align: middle;
padding-left: 35px;
}

.qiye {
width: 195px;
padding-left: 30px;
}

.qiye>div {
overflow: hidden;
display: table;
}

.qiye img {
float: left;
width: 42px;
height: 42px;
margin-right: 10px;
border-radius: 50%;
}

.qiye span {
display: table-cell;
vertical-align: middle;
}

.zhonglei {
width: 70px;
}

.diqu {
width: 100px;
}

.jiameng_xuqiu {
width: 240px;
}

.lianxiren {
width: 45px;
}

.lianxidianhua {
width: 95px;
}

.riqi {
width: 105px;
}

/*加盟信息list end*/

 效果图

 

注意：border-collapse:collapse和border-radius不兼容