CSS之居中

  1、水平居中

1）文本、圖片等行內元素的水平居中

給父元素設置text-align:center；

2）肯定寬度的塊級元素的水平居中

設置margin-left:auto和margin-right:auto；

3）不肯定寬度的塊級元素的水平居中（3種方法）

法一 將要居中的元素包含在table標籤內，對table設置margin-left:auto和margin-right:auto。

說明：table標籤自己並非塊級元素，若是不給它設定寬度的話，它的寬度由內部元素的寬度「撐起」。

缺點：增長了無語義標籤，加深了標籤的嵌套層數。

法二 改變塊級元素的display爲inline，而後使用text-align:center來實現居中

優勢：不用增長無語義標籤，簡化了標籤的嵌套深度。

缺點：將塊級元素變成了行內元素，會帶來一些限制。由於行內元素比起塊級元素缺乏一些功能。

法三 給父元素設置float，而後父元素設置position:relative和left:50%，子元素設置position:relative和left:-50%來實現水平居中。

優勢：保留塊級元素仍以display:block的形式顯示，並且不會添加無語義標籤，不增長嵌套深度。

缺點：設置了position:relative，帶來必定反作用。

 

2、垂直居中

1）父元素高度不肯定的文本、圖片、塊級元素的垂直居中

給父元素設置相同的上下邊距。

2）父元素高度肯定的單行文本的垂直居中

經過給父元素設置line-height來實現，其中line-height值和父元素的height值相同。

3）父元素高度肯定的多行文本、圖片、塊級元素的垂直居中

設置vertical-align:middle;

問題：只有當父元素爲td或者th時，該屬性纔會生效，對於其餘塊級元素，例如div、p等，默認狀況下不支持vertical-align屬性。

解決辦法：

在FireFox和IE8下，能夠設置塊級元素的display:table-cell，來激活vertical-align屬性。

對於不支持display:table-cell的IE6和IE7，有兩種方法。

法一 能夠直接使用表格。

優勢：很好的實現垂直居中效果，且不會帶來任何樣式上的反作用。

缺點：添加了無語義標籤，並增長了嵌套深度

法二 使用特定格式的hack。父元素設置position:absolute;top:50%，子元素設置position:relative;top:-50%。

優勢：沒有增長無語義標籤

缺點：使用了hack, 須要設置position:relative和position:absolute，帶來了反作用。