利用CSS實現居中對齊

2022-07-08 03:57:11 字數 4158 閱讀 2613

1. 文字居中

首先編寫乙個簡單的html**,設定乙個類名為parentdiv的div物件。html**如下:

1

<

div

class

="parentdiv"

>

2這裡隨意填寫~...

3div

>

1.1 實現文字水平居中(使用text-align)

對div.parentdiv設定text-align: center;來實現。css**如下:

1

[css]23

.parentdiv

有些時候,你會發現即使使用了text-align: center;屬性,但是仍然沒有起到居中的作用。原因就在於div標籤本身沒有定義自己居中的屬性,而且這樣做對布局是非常不科學的方法。正確的設定方法其實很簡單就是給.parentdiv新增以下屬性:margin-left: auto;margin-right: auto;即可。具體可看2.1。

注:在父級元素定義text-align: center;屬性的意思就是在父級元素內的內容居中;對於ie瀏覽器這樣設定就沒問題了,但在mozilla瀏覽器中卻不行。解決辦法就是:在子元素定義設定時,再加上margin-left: auto;及margin-right: auto;就沒問題了。需要說明的是如果想用這個方法使整個頁面要居中,建議不要套在乙個div裡,可以依次拆出多個div,只要在每個拆出的div裡定義margin-left: auto;及margin-right: auto;就行。

1.2 單行文字垂直居中(使用line-height

文字在層中垂直居中使用vertical-align屬性是做不到的,所以這裡有個比較巧的方法就是:設定height的高度與line-height的高度相同。css**如下:

1

[css]23

.parentdiv

1.3 文字垂直居中(使用vertical-align)

可以使用vertical-align實現垂直居中,不過vertical-align僅適用於內聯元素和table-cell元素,因此之前需要轉化。

1

[css]23

.outerbox

1.4 垂直居中(使用background-position)

這裡指的是背景方法,在div.parentdiv物件中使用background-position屬性。css**如下:

1

[css]23

.parentdiv

注:關鍵就在於最後的center,這個引數定義的位置。當然,background-position屬性還可以寫成「top left"或者"bottom right"等,也可以直接寫數值。

2. div居中

首先編寫乙個簡單的html**,設定乙個父div類名為parentdiv,再設定乙個子div類名為childdiv。html**如下:

1

<

div

class

="parentdiv"

>

2<

div

class

="childdiv"

>

div>

3div

>

實現parentdiv和childdiv父子div的盒子寬高背景色和邊框大小。css**如下:

1

[css]23

* 89.parentdiv

1516

.childdiv

2.1 水平居中(使用margin:auto)

當div.childdiv物件擁有固定寬度時,設定水平方向margin為auto,可以實現水平居中。css**如下:

1

[css]23

/*margin:auto實現水平居中,需要居中的div必須擁有固定的寬度*/4

.parentdiv .childdiv

2.2 實現水平居中(使用text-align:center)

如果給子盒子div.childdiv設定display: inline-block不影響整體布局時,可以將子盒子轉化為inline-block,對父盒子設定text-align:center實現居中對齊。css**如下:

1

[css]23

/*4text-align: center;實現水平居中

5需要子盒子設定為display: inline-block;6*/

7.parentdiv

1011

.parentdiv childdiv

2.3 table-cell元素居中

將父盒子設定為table-cell元素,可以使用text-align: center;和vertical-align: middle;實現水平、垂直居中。比較好的解決方案是利用三層結構模擬父子結構。html**如下:

1

<

div

class

="parentdiv tablecell"

>

2<

div

class

="id1"

>

3<

div

class

="childdiv"

>tablecell

div>

4div

>

5div

>

css**如下:

1

[css]23

/*4table-cell實現居中

5將父盒子設定為table-cell元素,設定

6text-align: center; vertical-align: middle;

7子盒子設定為inline-block元素8*/

9.tablecell

1213

.tablecell .id1

1819

.tablecell .childdiv

2.4 絕對定位居中(利用margin實現偏移)

將parentdiv物件設定為定位元素(利用position: relative;屬性),將childdiv物件設定為絕對定位,left和top均為50%,這時子盒子的左上角居中對齊,利用margin實現偏移。css**如下:

1

[css]23

/*絕對定位實現居中*/4

.parentdiv 78

.parentdiv .childdiv

2.5 絕對定位居中(利用transform實現偏移)

絕對定位方式與2.4類似,只不過利用transform中的translate實現偏移。css**如下:

1

[css]23

/*絕對定位實現居中,transform偏移*/4

.parentdiv 78

.parentdiv .childdiv

2.6 絕對定位居中(利用margin:auto實現偏移)

同樣對子盒子實現絕對定位,這裡使用top、right、bottom、left均為0,margin為auto實現偏移。css**如下:

1

[css]23

/*絕對定位實現居中,margin:auto實現偏移*/4

.parentdiv 78

.parentdiv .childdiv

2.7 flexbox居中

使用彈性盒模型(flexbox)實現居中。css**:

1

[css]23

/*flexbox實現居中*/4

.flexbox

TM 利用CSS實現居中對齊

利用css實現居中對齊 1.文字居中 首先編寫乙個簡單的html 設定乙個類名為parentdiv的div物件。html 如下 div class parentdiv 這裡隨意填寫 div 1.1 實現文字水平居中 使用text align 對div.parentdiv設定text align ce...

如何實現居中對齊

html m 1 絕對定位優點 相容性好,不需要知道寬高,適用於塊級元素缺點 脫離文件流 vertical content m 2 line height優點 相容性好,適用於inline和inline block元素缺點 需要對父元素進行完全控制 vertical content m 3 tabl...

利用css實現居中的方法

1 水平居中 margin 0 auto 關於這個,大家應該是最不陌生的,不管是在培訓班還是自己自學的話 這個應該是老師講的第乙個方法了 水平方向上 但是其有乙個前提,就是被包裹的元素不能有浮動的屬性。否則的話這個屬性就會失效。具體如下圖 12 2 水平居中 text align center 這個...