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;

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