目前知道有两种方法
方法一：主要适用于元素未设定高度的情况下。
直接上代码
html:
1 <div class="nav-content"> 2 <ul ng-click="navItem($event)" ng-model="navType"> 3 <li id="nav_msglist"> 4 <a href="#/">消息列表</a> 5 </li> 6 <li id="mislist"> 7 <a href="#/">通知列表</a> 8 </li> 9 <li> 10 <a href="#/">消息列表</a> 11 </li> 12 <li> 13 <a href="#/">消息列表</a> 14 </li> 15 <li id="userset"> 16 <a href="#/userset">账号设置</a> 17 </li> 18 </ul> 19 </div>
css:
1 .nav-content li a{color: #6f6f6f;position: absolute;-webkit-transform: translateY(-50%);top: 50%;display: block;}
方法二：适用于元素高度为已知的情况。
html:
1 <div class="msg-operation"> 2 <div class="optico"><img src="images/collect-ico.png" /></div> 3 <div class="optico"><img src="images/collect-ico.png" /></div> 4 <div clas="optico"><img src="images/collect-ico.png" /></div> 5 </div>
css:
1 .optico{ 30%;display: inline-block;position: relative;text-align: right;} 2 .optico img{height: 20px; 20px;position: absolute;top: 50%;margin-top: -10px;left: 50%;margin-left: 10px;}
当然在未设定margin的左右边距的情况下，div居中还有一种方法，就是 margin:0 auto;