利用css實現居中對齊
1. 文字居中
首先編寫乙個簡單的html**，設定乙個類名為parentdiv的div物件。html**如下：
<
div
class
="parentdiv"
>
這裡隨意填寫~...
div>
1.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**如下：
<
div
class
="parentdiv"
>
<
div
class
="childdiv"
>
div>
div>
實現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;實現水平、垂直居中。比較好的解決方案是利用三層結構模擬父子結構。html**如下：
<
div
class
="parentdiv tablecell"
>
<
div
class
="id1"
>
<
div
class
="childdiv"
>tablecell
div>
div>
div>
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
具體總結的就這麼多了，以後可能還會更多，再慢慢更新新增吧，畢竟html5+css3已經成為了未來的趨勢，我們要跟的上**的趨勢，趁勢而上，才能跟上時代的步伐！
利用CSS實現居中對齊
1.文字居中 首先編寫乙個簡單的html 設定乙個類名為parentdiv的div物件。html 如下 1 div class parentdiv 2這裡隨意填寫 3div 1.1 實現文字水平居中 使用text align 對div.parentdiv設定text align center 來實現...
如何實現居中對齊
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 這個...