一、使用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>