CSS 水平居中和垂直居中

1、水平居中——行內元素

text-align: center;

2、水平居中——定寬塊狀元素

margin: auto，滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。

3、水平居中——不定寬塊狀元素

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

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

（2）設定 display: inline 方法：改變塊級元素的 display 為 inline 型別（設定為行內元素顯示），然後使用text-align:center來實現居中效果。

（3）設定 position:relative 和 left:50%：通過給父元素設定float，然後給父元素設定 position:relative

和left:50%，子元素設定position:relative 和left: -50%來實現水平居中。

4、水平居中——父元素高度確定

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和line-height 高度一致來實現的。(height: 該元素的高度，line-height: 行高（行間距），指在文字中，行與行之間的基線間的距離 )。

line-height與 font-size的計算值之差，在css 中成為「行間距」。分為兩半，分別加到乙個文字行內容的頂部和底部。

這種文字行高與塊高一致帶來了乙個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。

5、水平居中——父元素高度確定的多行文字

方法一：使用插入 table

(包括tbody、tr、td)標籤，同時設定vertical-align：middle。