2020/03/12 更新發現更簡單的方法，請參考這篇文章https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container"> <div class="fixer-container"> <ul class="list-of-floating-elements"> <li class="floated">Floated element</li> <li class="floated">Floated element</li> <li class="floated">Floated element</li> </ul> </div> </div>
CSS：
<style>
ul li{
float:left;
margin:0 20px
}
.main-container {
float:left;
position:relative;
left:50%;
}
.fixer-container {
float:left;
position:relative;
left:-50%;
}
</style>參考：
