.container li{
margin-right:8px;
display:inline;
}
</style>
3. 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
代码如下：
XML/HTML Code复制内容到剪贴板
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
CSS Code复制内容到剪贴板
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%; }
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>
还有一种方法：
CSS Code复制内容到剪贴板
.container{
position: absolute;
top:50%;
left:50%;
margin:-170px -250px; /*container宽500px，高340px*/
}
以上这篇CSS水平居中总结(新手必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
