一、使用CSS水平居中的三种情况 。
1、行内元素（文本、图片等）；
2、定宽块状元素 ；
3、不定宽块状元素（3种方法）；
二、具体解决方法。
1、行内元素（文本、图片等）：
给父元素设置 text-align：center;
2、定宽块状元素 ：
<style>
div{
border:1px solid blue;
width:350px;
height:20px;
margin:20px auto; /*水平居中：上下方向有20px的margin值，左右方向的等margin值由浏览器自动设置*/
}
</style>
<body>
<div>这是个定宽块状元素，居中显示</div>
</body>
3、不定宽块状元素（3种方法）：
（1）为需要水平居中的元素加table标签；然后为table设置样式： table{margin:0 auto;}
（2）将块级元素转换为内联元素（eg：div{display：inline；}）；然后使用text-align:center;来实现居中
<style>
.container{text-align:center;}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
（3）给父元素设置float:left; position:relative; left:50%;
子元素设置position:relative; left:-50% 来实现水平居中
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
display:inline;
float:left; /*有无都可*/
}
</style>
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>