方法三：
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
.wrapper{width:500px;height:100px;background:black;}
.demo{clear:both;padding-top:5px;float:left;position:relative;left:50%;}
.demo li{display:inline;float:left;margin-right:5px;position:relative;left:-50%;}
.demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}
.demo a:hover{background:white;color:#316ac5;}
</style>
</head>
<body>
<div class=”wrapper”>
<ul class=”demo”>
<li><a href=”#”>1</a></li>
</ul>
<ul class=”demo”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
</ul>
<ul class=”demo”>
<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>
</ul>
</div>
</body>
</html>
方法三通过给父层设置浮动和相对定位以及 left:50%，子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能，而且不会添加无语义标签，不增加嵌套深度，但是设置了相对定位，会带来一定的副作用。
这三种方法各有优缺点，具体使用哪种方法可以视具体情况而定。
垂直居中
1、父层高度不确定的垂直居中
通过给父层设置相同的上下内边距实现。
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{margin:0;padding:0;}
.demo{width:500px;color:white;margin-bottom:10px;padding-top:20px;padding-bottom:20px;background:black;}
.content{width:200px;height:50px;background:red;}
</style>
</head>
<body>
<div class=”demo”>hello world</div>
<div class=”demo”><img src=”cat.jpg” width=”248″ height=”162″ alt=””/></div>
<div class=”demo”><div class=”content”></div></div>
