水平居中和垂直居中

轉載地址：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>