CSS 水平居中和垂直居中
转自：http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html
1.水平居中
(1) 文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
(2) 确定宽度的块级元素的水平居中
通过设置margin-left:auto;和margin-right:auto;来实现的。
(3) 不确定宽度的块级元素的水平居中
方法一:
使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!
将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。
缺点：增加了无语意标签，加深了标签的嵌套层数。
<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
.wrap{ width:500px; height:100px;}
table{margin-left:auto;margin-right:auto;}
.test li{float:left; display:inline; margin-right:5px;}
</style>
<div class="wrap">
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
方法二：
改变块级元素display为inline类型，然后使用text-align:center来实现居中。
较方法一，好处是不用增加无语义标签，简化了标签的嵌套深度。坏处，将块级元素的display类型改为inline，缺少了一些块级元素的功能，比如高宽。
<style>
.wrap{ width:500px; heighe:100px;}
.test{text-align:center; padding:5px;}
.test li{display:inline;}
</style>
<div class="wrap">
<ul class="test">
<li>1</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
方法三:
通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍以display:block的形式显示，而且不添加无语义标签，不增加嵌套深度，但缺点是设置了position:relative，带来一定的副作用。
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.wrap{ 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-right:5px; position:relative; left:-50%;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;}
</style>
<div class="wrap">
<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>
2.垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下边距实现的，即设置padding-top和padding-bottom。
(2)父元素高度确定的单行文本的垂直居中
通过给父元素设置line-height来实现，line-height值和父元素高度值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
CSS中有一个用于垂直居中的属性vertical-align，但只有当父元素为td或者th时，这个属性才生效，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性，但ie6和ie7并不支持display:table-cell。
方法一：
直接使用table，因为td标签默认下就隐式设置了vertical-align:middle。
方法二：
对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的ie6和ie7，使用特定格式的hack。
<style type="text/css">
.mb10{margin-bottom:10px;}
.wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;}
.test{width:200px;height:50px;background:#f00;}
.verticalWrap{*position:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
</style>
<div class="mb10">
<div class="wrap">
<div class="verticalWrap">
<div class="vertical">
hello world<br />
hello world<br />
hello world
</div>
</div>
</div>
</div>
<div class="mb10">
<div class="wrap">
<div class="verticalWrap">
<img src="" class="vertical" />
</div>
</div>
</div>
<div class="mb10">
<div class="wrap">
<div class="verticalWrap">
<div class="test vertical"></div>
</div>
</div>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
