一.posotion:relative;
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>testUl居中</title> <style type="text/css"> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrapper{ float:left; position: relative; left:50%; } ul{ position:relative; left:-50%; } </style> </head> <body> <div class="wrapper"> <ul> <li>内容一</li> <li>内容为二</li> <li>内容三</li> <li>内容四</li> </ul> </div> </body> </html>
浏览器兼容性：IE8以上
若要兼容IE7在div外面再包裹一个div{position:relative;}
二.display:inline-block +text-align:center
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>testUl居中</title> <style type="text/css"> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrapper{ text-align: center; } ul{ display:inline-block; } </style> </head> <body> <div class="wrapper"> <ul> <li>内容一</li> <li>内容二</li> <li>内容三</li> <li>内容四</li> </ul> </div> </body> </html>
浏览器兼容性：IE8以上
三.diplay:table
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>testUl居中</title> <style type="text/css"> *{ margin:0; padding:0; } ul,li{ list-style: none; } /*.wrapper{ text-align: center; }*/ ul{ display:table; margin:0 auto; } li{ display:table-cell; } </style> </head> <body> <!-- <div class="wrapper"> --> <ul> <li>内容一</li> <li>内容二</li> <li>内容三</li> <li>内容四</li> </ul> <!-- </div> --> </body> </html>
浏览器兼容性：不支持IE7以下版本的IE浏览器
四.display:inline-flex ＋ text-align:center
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>testUl居中</title> <style type="text/css"> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrapper{ text-align: center; } ul{ display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex; } </style> </head> <body> <div class="wrapper"> <ul> <li>内容一</li> <li>内容二</li> <li>内容三</li> <li>内容四</li> </ul> </div> </body> </html>
浏览器兼容性：不支持IE7以下版本的IE浏览器