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> ```