<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{cursor: pointer;}
ul{padding:0;border:0;margin:0;}
ul li{list-style-type:none;}
.ylBox{300px;background-color:#f2f2f2;height:500px;padding:20px;}
.ylBox .ul{display:table;100%; vertical-align: middle;}
.ul li{background-color:#FFF;}
.ul .child{300px;display: table-cell;height: 60px;overflow: hidden;vertical-align: middle;}
.ul .child .twoChild{max-height:35px;word-break: break-all;overflow: hidden;padding: 0 10px;vertical-align: middle;}
.ul .child:hover{background-color:#000;color:#FFF;}
.ul a{display:inline-block;}
</style>
</head>
<body>
<div class="ylBox">
<ul class="ul">
<li>
<a class="child" href="">
<div class="twoChild">
我是个很长很长很长很长的名字哦
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
之前是没有在a里面加div，怎么调试都没有办法显示两行并且居中，加了div问题就解决了