CSS中各種置中方法

標籤：com   lin   垂直   移動   自適應   計算   abs   左右   技術分享   

   CSS中各種置中方法，本文回顧一下，便於後續的使用。

水平置中方法

1.行內元素置中

      行內元素置中是只針對行內元素的，比如文本（text）、圖片（img）、按鈕等行內元素，可通過給父元素設定 text-align:center 來實現。另外，如果塊狀元素屬性display 被設定為inline時，也是可以使用這種方法。但有個首要條件是子項目必須沒有被float影響，否則一切都是無用功。

2、塊狀元素置中

（1）定寬塊狀元素置中

 滿足定寬（塊狀元素的寬度width為固定值）和塊狀兩個條件的元素可以通過設定“左右margin”值為“auto”來實現置中。

（2）不定寬塊狀元素置中

顯示：

 

方法1：這種方法是利用：table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀置中的margin的方法，使其水平置中。

 

方法2：通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子項目設定 position:relative 和 left: -50% 來實現水平置中。

輸出：

3.position加margin方法實現水平垂直置中
輸出：

使用margin：auto和position：absolute來實現置中顯示。不過這裡得確定內部元素的高度，可以用百分比，比較適合移動端。

4display：flex和margin：auto使用

實現效果如。

display：flex是彈性布局，後面慢慢介紹下flex的屬性。

5.使用display：flex;align-items: center;justify-content: center，這是移動端首選
輸出：

6，純position實現水平垂直置中

輸出：

這裡的話，子容器的子項目（con）的left值計算公式：left=(父元素的寬 - 子項目的寬 ) / 2=(200-100) / 2=50px;
子項目（con）的top值計算公式：top=(父元素的高 - 子項目的高 ) / 2=(200-100) / 2=50px;

第二種代碼是直接

left值固定為50%;子項目的margin-left= -（子項目的寬/2）=-100/2= -50px;top值也一樣，固定為50%，子項目的margin-top= -（子項目的高/2）=-100/2= -50px;

這兩種方法適用於所有的瀏覽器。

 

CSS中各種置中方法