css经常用来处理居中问题，不同的情况使用不同的方法；
一 :水平居中
(1)文本、图片等行内元素的水平居中
给父元素设置text-align:center,可以实现文本、图片等行内元素的水平居中
<style>
.wrapper{width:500px; height:100px; text-align:center}
</style>
<div class="wrapper">
hello world!
</div>
<div class="wrapper">
<img src="test.png">
</div>
(2)确定宽度的块级元素
确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto来实现。
<style>
.wrapper{width:500px; height:100px;background:#ccc;}
.inner{width:200px;height:50px;margin-left:auto;margin-right:auto;background:#f00;}
</style>
<div class="wrapper">
<div class="inner">hello world!</div>
</div>
(3)不确定宽度的块级元素的水平居中，有三种方式可以实现，以分页模块为例，因为分页的数量不确定，所以不能通过设置宽度来限制它的弹性。
方法一
<style>
ul {list-style:none;margin:0;padding:0;}
table {margin-left:auto;margin-right:auto;}
.test li{float:left;display:inline;}
.test a{float:left;width:20px;height:20px;text-algin:center;line-height:20px;}
.test a:hover{background:#fff;color:#313ac5;}
</style>
<div class="wrapper">
<table>
<tbody><tr><td>
<ul class="test">
<li><a href="#">1</a></li>
</ul>
</td></tr></tbody>
</table>
<table>
<tbody><tr><td>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr></tbody>
</table>
<table>
<tbody><tr><td>
<ul class="test">
<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>
</td></tr></tbody>
</table>
</div>
该方法演示了分页有一个页码，三个页码，五个页码。宽度值不能确定。
这里使用了一个table标签来帮助实现不确定宽度的块级元素的水平居中，table本身并不是块级元素，如果不给它设定宽度，它的宽度有内部元素的宽度撑起，即使不设定它的宽度，仅设定margin-left:auto和margin-right:auto就可以实现水平居中，将ul包含在table标签中，对table设置margin-left:auto和margin-right:auto，就间接的是ul实现水平居中。
方法二
<style>
ul{list-style:none;margin:0;padding:0;}
.wrapper{background:#000;width:500px;height:100px;}
.test{text-align:center;padding:5px;}
.test li{display:inline}
.test a{padding:2px 6px; background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
.test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
<ul class="test"><li><a href="#">1</a></li></ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test">
<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>
该方法改变了块级元素li的显示方法，display为inline，然后使用text-align:center来实现居中。此方法优点是不用增加过多的语义标签。缺点是块级元素设置成行内元素后，缺少了一些特性，不能设置宽度。
方法三
<style>
ul{list-style:none;margin:0;padding:0;}
.wrapper{background:#000;width:500px;height:100px;}
.test{clear:both; padding-top:5px;float:left;position:relative;left:50%;}
.test li{float:left;display:inline;margin-left:5px;positive:relative;left:-50%;}
.test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
.test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
<ul class="test"><li><a href="#">1</a></li></ul>
<ul class="test">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<ul class="test">
<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>
该方法通过给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来设置水平居中。这个方法可以保留块级元素有的display:block属性，且不会添加语义标签。缺点是设置了position:relative，增加了一些副作用。
垂直居中
1 父元素高度不确定的文本、图片、块级元素的垂直居中
<style>
.wrapper{background:#000;width:500px;color:#fff;padding-bottom:10px;
padding-top:10px;}
.test{width:200px;height:50px;background:#f00;}
</style>
<div class="wrapper">hello world</div>
<div class="wrapper"><img src="test.jpg" /></div>
<div class="wrapper"><div class="test"></div></div>
父元素高度不确定的文本、图片、块级元素的垂直居中通过给父容器设置相同的上下内边距来实现。
2 父元素高度确定的单行文本的垂直居中
<style>
.wrapper{background:#000;width:500px;height:100px;line-height:100px;color:#fff;}
</style>
<div class="wrapper">hello world</div>
父元素高度确定的单行文本的垂直居中，通过给父元素设置line-height来实现的，line-height的值和父元素的高度值相同
3 父元素高度确定的多行文本、图片、块级元素的垂直居中
方法一
利用css的一个垂直居中属性vertical-align，但是只有当父元素为td或th时，这个vertical-align才会生效，对于其他的块级元素（div、p）默认情况下是不支持该属性。在Firefox和IE8下，可以设置块级元素的display:table-cell属性，激活vertical-align。在IE6和IE7下不支持table-cell属性，设置table-cell方法无法解决浏览器兼容问题。总之，直接使用表格减少些操作。缺点是增加了嵌套深度和语义标签。
<style>
.wrapper{background:#000;width:500px;color:#fff;height:100px;}
.test{width:200px;height:50px;background:red;}
</style>
<table>
<tbody><tr><td class="wrapper">
hello<br>
hello<br>
hello<br>
hello
</td></tr></tbody>
</table>
<table>
<tbody><tr><td class="wrapper">
<img src="img.jpg">
</td></tr></tbody>
</table>
<table>
<tbody><tr><td class="wrapper">
<div class="test"></div>
</td></tr></tbody>
</table>
方法二
对于支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。对于不支持的IE6和IE7使用特定的hack。利用hack技术区别对待Firefox、IE8、IE7和IE6，在不支持display:table-cell的IE6、IE7下，通过给父子两层元素分别设置top:50%和top:-50%来实现居中。
<style>
.mb10{margin-bottom:10px;}
.wrapper{background:#f00;width:500px;color:#fff;margin-bottom:10px;height:10px;
display:table-cell;vertical-align:middle;*position:relative;}
.test{width:200px;height:50px;background:#f00;}
.verticalWrapper{*position:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
</style>
<div class="mb10">
<div class="wrapper">
<div class="verticalWrapper">
<div class="vertical">
hello world!<br>
hello world!<br>
hello world!
</div>
</div>
</div>
</div>
<div class="mb10">
<div class="wrapper">
<div class="verticalWrapper">
<img src="img.jpg" class="vertical">
</div>
</div>
</div><div class="mb10">
<div class="wrapper">
<div class="verticalWrapper">
<div class="test vertical"></div>
</div>
</div>
</div>
内容选自《编写高质量代码-web前端开发修炼之道》
