利用CSS實現居中對齊

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**如下：

[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**如下：

[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**如下：

[css]23

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

.parentdiv 78

.parentdiv .childdiv

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

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

[css]23

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

.parentdiv 78

.parentdiv .childdiv

2.7 flexbox居中

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

1
[css]23
/*flexbox實現居中*/4
.flexbox

利用CSS實現居中對齊

TM 利用CSS實現居中對齊

如何實現居中對齊

利用css實現居中的方法

利用CSS實現居中對齊

TM 利用CSS實現居中對齊

如何實現居中對齊

利用css實現居中的方法

相關推薦