1. 文字居中
首先編寫乙個簡單的html**，設定乙個類名為parentdiv的div物件。html**如下：
複製**
**如下:
這裡隨意填寫~...
.1 實現文字水平居中（使用text-align）
對div.parentdiv設定text-align: center;來實現。css**如下：
複製**
**如下:
[css]
.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**如下：
複製**
**如下:
[css]
.parentdiv
1.3 文字垂直居中（使用vertical-align）
可以使用vertical-align實現垂直居中，不過vertical-align僅適用於內聯元素和table-cell元素，因此之前需要轉化。
複製**
**如下:
[css]
.outerbox
1.4 垂直居中（使用background-position）
這裡指的是背景方法，在div.parentdiv物件中使用background-position屬性。css**如下：
複製**
**如下:
[css]
parentdiv
注：關鍵就在於最後的center，這個引數定義的位置。當然，background-position屬性還可以寫成「top left"或者"bottom right"等，也可以直接寫數值。
2. div居中
首先編寫乙個簡單的html**，設定乙個父div類名為parentdiv，再設定乙個子div類名為childdiv。html**如下：
複製**
**如下:
實現parentdiv和childdiv父子div的盒子寬高背景色和邊框大小。css**如下：
複製**
**如下:
[css] *
.parentdiv
.childdiv
2.1 水平居中（使用margin:auto）
當div.childdiv物件擁有固定寬度時，設定水平方向margin為auto，可以實現水平居中。css**如下：
複製**
**如下:
[css]
/*margin:auto實現水平居中，需要居中的div必須擁有固定的寬度*/
parentdiv .childdiv
2.2 實現水平居中（使用text-align:center）
如果給子盒子div.childdiv設定display: inline-block不影響整體布局時，可以將子盒子轉化為inline-block，對父盒子設定text-align:center實現居中對齊。css**如下：
複製**
**如下:
[css]
/*text-align: center;實現水平居中
需要子盒子設定為display: inline-block;
*/.parentdiv
.parentdiv childdiv
2.3 table-cell元素居中
將父盒子設定為table-cell元素，可以使用text-align: center;和vertical-align: middle;實現水平、垂直居中。比較好的解決方案是利用三層結構模擬www.cppcns.com父子結構。html**如下：
複製**
**如下:
tablecell
css**如下：
複製**
**如下:
[css]
/*table-cell實現居中
將父盒子設定為table-cell元素，設定
text-align: center; vertical-align: middle;
子盒子設定為inline-block元素
*/.tablecell
.tablecell .id1
.tablecell .childdiv
2.4 絕對定位居中（利用margin實現偏移）
將parentdiv物件設定為定位元素（利用position: relative;屬性），將childdiv物件設定為絕對定位，left和top均為50%，這時子盒子的左上角居中對齊，利用margin實現偏移。css**如下：
複製**
**如下:
[css]
/*絕對定位實現居中*/
.parentdiv
.parentdiv .childdiv
2.5 絕對定位居中（利用transform實現偏移）
絕對定位方式與2.4類似，只不過利用transform中的translate實現偏移。css**如下：
複製**
**如下:
[css]
/*絕對定位實現居中,transform偏移*/
.parentdiv
.parentdiv .childdiv
2.6 絕對定位居中（利用margin:auto實現偏移）
同樣對子盒子實現絕對定位，這裡使用top、right、bottom、left均為0，margin為auto實現偏移。css**如下：
複製**
**如下:
[css]
/*絕對定位實現居中,margin:auto實現偏移*/
.parentdiv
.parentdiv .childdiv
2.7 flexbox居中
使用彈性盒模型(flexbox)實現居中。css**：
複製**
**如下:
[css]
/*flexbox實現居中*/
.flexbox
本文標題: css實現文字和div居中對齊詳細講解示例
本文位址:
Div文字居中
1.單行文字 設定div的高度與文字的行高一樣就可以了,即 line height 和 height 的數值是一樣的就可以了,最後給div乙個 over flow hidden 讓超出的部分隱藏.這種方法支援塊級和內聯極元素以及所有的瀏覽器,不過只能顯示一行,而且ie中不支援 img 等的居中,之所...
div文字居中
1.文字垂直居中 要垂直居中的文字 div2.背景大小自適應 div3.背景，文字自適應居中 divclass row divclass service bg service bg1 col lg 3 col md 3 col xs 3 divclass s content 已受理 div div ...
css實現文字或者div盒子水平垂直居中的方法
文字 文字 內容屬於行內元素 設定文字外層的盒子 text align center 水平居中 height 100px 垂直居中 line height 100px 垂直居中只要保證行高和盒子高度一致即可 如下 hello 將文字所在的盒子display設定成table cell text ali...