首页 > 代码库 > css 元素居中方法
css 元素居中方法
目前知道有两种方法
方法一：主要适用于元素未设定高度的情况下。
直接上代码
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{ width: 30%;display: inline-block;position: relative;text-align: right;}2 .optico img{height: 20px;width: 20px;position: absolute;top: 50%;margin-top: -10px;left: 50%;margin-left: 10px;}
当然在未设定margin的左右边距的情况下，div居中还有一种方法，就是 margin:0 auto;
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。