css水平垂直居中

水平居中

1.行內元素水平居中

如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定text-align:center來實現的。

我想要在父容器中水平居中顯示。

div

class

="imgcenter"

img

src=""

div>

body

html

顯示結果為：

2.塊狀元素水平居中

2.1定寬元素水平居中（width:xpx 或者width:x%等）

滿足定寬和塊狀兩個條件的元素是可以通過設定在該元素對應的樣式中設定「左右margin」值為「auto」來實現其在父類元素中居中的。我們來看個例子就是設定 div 這個塊狀元素水平居中：

2.2不定寬元素水平居中（沒有設定width的值）

在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

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

加入 table 標籤

設定 display: inline 方法：與第一種類似，顯示型別設為行內元素，進行不定寬元素的屬性設定

設定 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

1.加入table標籤或者設定display屬性值為table

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

具體操作如下：

第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括、、)。

第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。

或者直接給該元素設定display:table，然後按照定寬塊狀元素設定居中，即：margin的left和right均設定為auto。

例如：我們想讓無序列表在父類中居中顯示：

等同於如下**：

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

但這樣存在乙個問題：這種方法相比第一種方法的優勢是不用增加無語義標籤，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。

3.使用position進行定位

通過給父元素設定float，然後給父元素設定 position:relative

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

垂直居中

我們在實際工作中也會遇到需要設定垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設定為垂直居中，為了使用者體驗性好。

這裡我們又得分兩種情況：父元素高度確定的單行文字，以及父元素高度確定的多行文字。

1.父類高度確定的單行文字

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和line-height

高度一致

來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文字中，行與行之間的基線間的距離 )。

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

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

例如：

2.父類高度確定的多行文字

css 中有乙個用於豎直居中的屬性 vertical-align，在父元素設定此樣式時，會對inline-block型別的子元素都有用。

css水平垂直居中

css 水平居中垂直居中水平垂直居中

css水平居中垂直居中水平垂直居中

css實現水平居中垂直居中垂直水平居中布局

css水平垂直居中

css 水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中

css實現水平居中 垂直居中 垂直水平居中布局

相關推薦

css 水平居中垂直居中水平垂直居中

css水平居中垂直居中水平垂直居中

css實現水平居中垂直居中垂直水平居中布局