15-5水平居中總結-不定寬塊狀元素方法（三） · 初識HTML+CSS

除了前兩節講到的插入table標簽，以及改變元素的display類型，可以使不定寬塊狀元素水平居中之外，本節介紹第3種實現這種效果的方法，設置浮動和相對定位來實現。方法三：通過給父元素設置 [float](http://www.imooc.com/code/2071 "忘了的小伙伴，讓我們點擊鏈接復習一下吧! ")，然后給父元素設置 [position:relative](http://www.imooc.com/code/2074 "忘了的小伙伴，讓我們點擊鏈接復習一下吧! ") 和 left:50%，子元素設置 position:relative 和 left:\-50% 來實現水平居中。我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。代碼如下： ~~~ <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> ~~~ css代碼： ~~~ <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style> ~~~ 這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。 ### 任務我來試試：添加代碼為任務區中的 class 為 wrap-center 的div設置水平居中。（記得點擊右上角的全屏按鈕查看效果哦！） ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定寬塊狀元素水平居中</title> <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} /*下面是代碼任務區*/ .wrap{ float:left; position:relative; left:50%; } .wrap-center{ background:#ccc; position:relative; left:-50%; } </style> </head> <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>  <div class="wrap"> <div class="wrap-center">我們來學習一下這種方法。</div> </div> </body> </html> ```