css 居中詳解（轉）
css菜鳥學習之text-align屬性，行內元素，塊級元素居中詳解
一.text-align屬性
1.text-align用來設定元素中的的文字對齊方式，例如：如果需要設定圖片的對齊方式，需要設定圖片的父元素的text-align屬性；
2.text-align只對文字有效，對元素無效，不能設定元素的對齊方式；
3.表格元素td是屬於inline-block，可以使用text-align設定td中的文字對齊方式；
二.水平居中和垂直居中
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>