css實現(xiàn)文本和div居中對齊詳細講解示例
我要評論1. 文本居中
首先編寫一個簡單的html代碼，設(shè)置一個類名為parentDiv的div對象。html代碼如下：
<div class="parentDiv">
這里隨意填寫~...
</div>
.1 實現(xiàn)文字水平居中（使用text-align）
對div.parentDiv設(shè)置text-align: center;來實現(xiàn)。CSS代碼如下：
[css]</p> <p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /*水平居中*/
}
有些時候，你會發(fā)現(xiàn)即使使用了text-align: center;屬性，但是仍然沒有起到居中的作用。原因就在于div標(biāo)簽本身沒有定義自己居中的屬性，而且這樣做對布局是非常不科學(xué)的方法。正確的設(shè)置方法其實很簡單就是給.parentDiv添加以下屬性：margin-left: auto;和margin-right: auto;即可。具體可看2.1。
注：在父級元素定義text-align: center;屬性的意思就是在父級元素內(nèi)的內(nèi)容居中；對于IE瀏覽器這樣設(shè)置就沒問題了，但在Mozilla瀏覽器中卻不行。解決辦法就是：在子元素定義設(shè)定時，再加上margin-left: auto;及margin-right: auto;就沒問題了。需要說明的是如果想用這個方法使整個頁面要居中，建議不要套在一個div里，可以依次拆出多個div，只要在每個拆出的div里定義margin-left: auto;及margin-right: auto;就行。
1.2 單行文本垂直居中（使用line-height）
文字在層中垂直居中使用vertical-align屬性是做不到的，所以這里有個比較巧的方法就是：設(shè)置height的高度與line-height的高度相同。CSS代碼如下：
[css]</p> <p>.parentDiv {
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
line-height: 100px; /* line-height = height */
}
1.3 文本垂直居中（使用vertical-align）
可以使用vertical-align實現(xiàn)垂直居中，不過vertical-align僅適用于內(nèi)聯(lián)元素和table-cell元素，因此之前需要轉(zhuǎn)化。
[css]</p> <p>.outerBox{
width:200px;
height:100px;
border: 1px solid #ececec;
text-align:center; /* 水平居中 */
display:table-cell; /*轉(zhuǎn)化成table-cell元素*/
vertical-align:middle; /*垂直居中對齊，vertical-align適用于內(nèi)聯(lián)及table-cell元素*/
}
1.4 圖片垂直居中（使用background-position）
這里指的是背景方法，在div.parentDiv對象中使用background-position屬性。CSS代碼如下：
[css]
parentDiv {
background: url(xxx.jpg) #ffffff no-repeat center;
}
注：關(guān)鍵就在于最后的center，這個參數(shù)定義圖片的位置。當(dāng)然，background-position屬性還可以寫成“top left"或者"bottom right"等，也可以直接寫數(shù)值。
2. div居中
首先編寫一個簡單的html代碼，設(shè)置一個父div類名為parentDiv，再設(shè)置一個子div類名為childDiv。html代碼如下：
<div class="parentDiv">
<div class="childDiv"></div>
</div>
實現(xiàn)parentDiv和childDiv父子div的盒子寬高背景色和邊框大小。CSS代碼如下：
[css]
* {
-webkit-box-sizing: border-box; /*Safari*/
-moz-box-sizing: border-box; /*Firefox*/
box-sizing: border-box;
}
.parentDiv {
width:400px;
height: 100px;
background-color: #00ff00;
margin: 20px;
}
.childDiv {
width: 200px;
height:50px;
background-color: #ff0000;
}
2.1 水平居中（使用margin:auto）
當(dāng)div.childDiv對象擁有固定寬度時，設(shè)置水平方向margin為auto，可以實現(xiàn)水平居中。CSS代碼如下：
[css]
/*margin:auto實現(xiàn)水平居中，需要居中的div必須擁有固定的寬度*/
parentDiv .childDiv {
margin: 0 auto;
}
2.2 實現(xiàn)水平居中（使用text-align:center）
如果給子盒子div.childDiv設(shè)置display: inline-block不影響整體布局時，可以將子盒子轉(zhuǎn)化為inline-block，對父盒子設(shè)置text-align:center實現(xiàn)居中對齊。CSS代碼如下：
[css]</p> <p>/*
text-align: center;實現(xiàn)水平居中
需要子盒子設(shè)置為display: inline-block;
*/
.parentDiv {
text-align: center;
}</p> <p>.parentDiv childDiv {
display: inline-block;
}
2.3 table-cell元素居中
將父盒子設(shè)置為table-cell元素，可以使用text-align: center;和vertical-align: middle;實現(xiàn)水平、垂直居中。比較好的解決方案是利用三層結(jié)構(gòu)模擬父子結(jié)構(gòu)。html代碼如下：
<div class="parentDiv tableCell">
<div class="id1">
<div class="childDiv">tableCell</div>
</div>
</div>
CSS代碼如下：
[css]</p> <p>/*
table-cell實現(xiàn)居中
將父盒子設(shè)置為table-cell元素，設(shè)置
text-align: center; vertical-align: middle;
子盒子設(shè)置為inline-block元素
*/
.tableCell {
display: table;
}</p> <p>.tableCell .id1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}</p> <p>.tableCell .childDiv {
display: inline-block;
}
2.4 絕對定位居中（利用margin實現(xiàn)偏移）
將parentDiv對象設(shè)置為定位元素（利用position: relative;屬性），將childDiv對象設(shè)置為絕對定位，left和top均為50%，這時子盒子的左上角居中對齊，利用margin實現(xiàn)偏移。CSS代碼如下：
[css]</p> <p>/*絕對定位實現(xiàn)居中*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
margin-left:-100px; /*利用margin實現(xiàn)偏移,設(shè)置為寬度和高度的一半的負值*/
margin-top:-25px;
}
2.5 絕對定位居中（利用transform實現(xiàn)偏移）
絕對定位方式與2.4類似，只不過利用transform中的translate實現(xiàn)偏移。CSS代碼如下：
[css]</p> <p>/*絕對定位實現(xiàn)居中,transform偏移*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform:translate(-50%, -50%) ;
transform:translate(-50%, -50%);
}
2.6 絕對定位居中（利用margin:auto實現(xiàn)偏移）
同樣對子盒子實現(xiàn)絕對定位，這里使用top、right、bottom、left均為0，margin為auto實現(xiàn)偏移。CSS代碼如下：
[css]</p> <p>/*絕對定位實現(xiàn)居中,margin:auto實現(xiàn)偏移*/
.parentDiv {
position: relative;
}</p> <p>.parentDiv .childDiv {
position: absolute;
left:0; /*top、right、bottom、left均為0*/
top:0;
right: 0;
bottom: 0;
margin: auto;
}
2.7 Flexbox居中
使用彈性盒模型(flexbox)實現(xiàn)居中。CSS代碼：
[css]</p> <p>/*flexbox實現(xiàn)居中*/
.flexBox {
display: -webkit-box; /*Safari*/
display: -moz-box; /*Firefox*/
display: -ms-flexbox; /*IE*/
display: -webkit-flex; /*Chrome*/
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
相關(guān)文章
- 這篇文章主要介紹了通過position定位實現(xiàn)div底端對齊，感興趣的朋友可以參考下2014-04-02
多個div中table的tdwidth設(shè)置一樣也不法對齊
最近發(fā)現(xiàn)多個div中table的td就算調(diào)成一樣的width也無法對齊，后來發(fā)現(xiàn)了解決方法，提到table-layout: fixed，經(jīng)設(shè)置效果相當(dāng)不錯，大家可以參考下2014-03-28- 這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時對其的問題，下面有個不錯的解決方法，大家可以參考下2014-03-28
- DIV和SPAN如何垂直居中對齊，水平居中很簡單，設(shè)置text-align:center就可以了，垂直居中一直很是疑惑，下面為大家解惑2014-02-20
- 在某些時候可能需要將一個絕對定位的div在它的父對象中垂直居中對齊，可能用到的頻率不是太高，但是偶爾也會用到，下面就簡單介紹一下如何實現(xiàn)此功能2014-01-27
div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對齊后，出現(xiàn)了換行問題，一般思路的話一定是認為通過分開兩列，一個align=left,另一個align=right；很是疑惑，于是利用閑暇時間，搜索整理下，曬出來 2012-12-19 div 水平居中的實現(xiàn)方法。2009-10-15CSS讓圖片垂直居中和底端對齊的代碼-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本CSS教程提供了兩種對齊方式即垂直居中對齊和底端對齊！更多內(nèi)容請參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17這篇文章主要為大家詳細介紹了html5 div布局與table布局，區(qū)分div布局與table布局的異同,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-16學(xué)習(xí)DIV+CSS網(wǎng)頁布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的三列布局，本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第三篇，感興趣的小伙伴們可以參考一下2016-03-15最新評論
大家感興趣的內(nèi)容