CSS中實現水平置中和垂直置中的方法

標籤：style   blog   class   tar   ext   color   

水平置中

1、使用text-align實現置中

將該屬性值設定為center，這是文本置中，但它卻能相容大多數瀏覽器，所以在某些情況下也自然必不可少。

2、負外邊距

首先，建立一個包含置中元素的容器，然後將其絕對位置於相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。然後，將容器的左外邊距值設定為負的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點。

3、組合使用自動外邊據和文本對齊

因為文本對齊置中方式有著良好的向下相容性，且自動外邊距方式也被大多數當代瀏覽器支援，所以很多設計師將二者組合起來使用，以期讓置中效果得到最大限度的跨瀏覽器支援。

4、使用自動外邊距實現置中

 margin: 0 auto;

在大多數主流瀏覽器中，這種方法都非常有效，即使是Windows平台上的IE6，在其標準相容模式(compliance mode)下也能夠正常顯示。但不幸的是，在更低版本的IE中，這種設定卻並不能實現置中效果。所以若想在實際項目中使用這種方法，那麼就要確保使用者的IE瀏覽器版本不低於6.0。儘管在支援上不盡如人意，但大多數設計師都建議儘可能地使用這種方法。該方法也被認為是在各種用CSS實現元素水平置中方法中最正確、最合理的一種。

5、彈性盒模型

如果盒子是彈性的，其大小將按下面的方式計算：
具體的大小聲明（width、height、min-width、min-height、max-width、max-height）；
父盒子的大小和所有餘下的可利用的內部空間
如果盒子沒有任何大小聲明，那麼其大小將完全取決於父box的大小。即：盒子的大小等於父級盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
如果一個或更多的盒子有一個具體的大小聲明，那麼其大小將計算其中，餘下的彈性盒子將按照上面的原則分享剩下的可利用空間。
看看下面的例子，理解起來更容易。

垂直置中

1、利用行高（line-height）定位

line-height通常是用於調節一段文字的行與行之間的距離，或者說兩行文字之間的距離，如果行高是500px，那麼每一行中的文字距離本行的頂部就是250px，如果將文字的行高設為500px，並且外面的容器的高度也為500px，同樣可以實現垂直置中，但是用它來實現垂直置中，也是有缺點的，就是如果內容過多，文字就會跑到下一行，那麼內容就不可能垂直置中了。

2、利用絕對位置

這個方法有個缺點我必須指出，就是外面的塊狀元素，必須指定高度，所以如果你在裡面放動態內容的話，後果會很糟糕滴！

CSS代碼：
這種用絕對位置來實現的垂直置中，取決與元素的寬度和高度，你可以用下面這兩個公式來計算元素的左邊距和上邊距
元素的寬度/2 = 負左邊距
元素的高度/2 = 負上邊距

3、多行內容置中，且容器高度可變也很簡單，給出一致的 padding-bottom 和 padding-top 就行。

優點：1. 同時支援塊級和內聯極元素2. 支援非常值內容3. 支援所有瀏覽器缺點：容器不能固定高度。

 4、利用vertical-align實現垂直，決定行高的是行內最高的元素的值。