版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35414779/article/details/84137141
1.相对浮动
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center1 {position:relative; left:50%; float:left;}
</style>
<body>
<ul class="unknow_width_center1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
</body>
</html>
效果图：
2.text-align居中
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center1 {text-align:center; }
</style>
<body>
<ul class="unknow_width_center1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
</body>
</html>
给父组件一个text-align让子组件的文字居中，弊端是子组件必须是inline。
效果图：
3.利用table的属性
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center3{margin:0 auto}
.unknow_width_center3 ul {overflow:hidden; *zoom:1}
</style>
<body>
<table class="unknow_width_center3">
<tbody>
<tr>
<td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
直接设置margin:0 auto就可以实现水平居中
参考未知宽度水平居中