对于一个盒子想要实现水平居中
1、给固定宽度，添加margin：0 auto；居中
这个方法适合宽度固定的时候使用
2、如果宽度未知，还想一直水平居中
给想要居中的盒子添加display:inline-block;
然后在给想要居中盒子的父元素添加text-align:center;
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}
.footer{
height: 263px;
background: #f4f4f4;
}
.nav-center{
width: 1192px;
height: 263px;
border-top: 1px solid #e1e1e1;
margin: 0 auto;
text-align: center;
}
.nav-center ul{
overflow: hidden;
margin-top: 19px;
display: inline-block;
}
.nav-center ul li{
float: left;
list-style: none;
font-size: 12px;
}
.nav-center ul li a{
color: #666666;
text-decoration: none;
padding: 0 11px;
border-right: 1px solid #e1e1e1;
}
.nav-center .last a{
border-right: 0;
}
</style>
</head>
<body>
<div class="footer">
<div class="nav-center">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">合作招商</a></li>
<li><a href="#">销售联系</a></li>
<li><a href="#">销售联系</a></li>
<li><a href="#">京东社区</a></li>
<li><a href="#">风险监测</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">京东公益</a></li>
<li><a href="#">English Site</a></li>
<li class="last"><a href="#">Media & IR</a></li>
</ul>
</div>
</div>
</body>
</html>
标签：居中,两种,盒子,center,ul,nav,margin From： https://www.cnblogs.com/xu529/p/16972981.html