大家知道，CSS有float:left和float:right，但能否實現float:center呢？水平居中浮動，當然是可以的，這裡將介紹你實現方法。以下面的Li列表為例，我們要實現中間LI的居中浮動：
1
<div id="Macji">
2
<ul class="Macji-skin">
3
<li>列表一</li>
4
<li>列表二</li>
5
<li>列表三</li>
6
</ul>
7
</div>
我們需要先了解下position:relative屬性，它是指left、right、top、bottom等中的偏移位置。我們可以讓ul為position:relative;left:50%，再讓li向左浮動，再讓position:relative;right:50%（或者left:-50%），那麼li就會向中間浮動一樣居中了。不相信的可把下面的CSS定義結合上邊的代碼拷貝到Html測試。
01
#Macji{
02
position:relative;
03
width:100%;
04
height:80px;
05
background-color:#eee;
06
text-align:center;
07
overflow:hidden;
08
}
09
#macji .Macji-skin{
10
float:left;
11
position:relative;
12
left:50%;
13
}
14
#macji .Macji-skin li{
15
position:relative;
16
right:50%;
17
float:left;
18
margin:10px;
19
padding:0 10px;
20
border:solid 1px #000;
21
line-height:60px;
22
}
雖然這樣用有些麻煩，但對於一個優秀的前端設計師，這個技巧還是有必要掌握的哦。