這篇文章主要講解了“HTML中元素居中要注意哪些事項(xiàng)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“HTML中元素居中要注意哪些事項(xiàng)”吧！
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),普陀企業(yè)網(wǎng)站建設(shè),普陀品牌網(wǎng)站建設(shè),網(wǎng)站定制,普陀網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,普陀網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
不使用定位
水平居中：text-align=center;（可繼承）
豎直居中：margin:0auto;(塊級(jí)元素)
其他居中：
1.文字居中：父元素設(shè)置高子元素設(shè)置高line-height=height(父元素)
2.圖片居中：vertical-aign：middle;<--必須放在圖片元素中
.first{
width:300px;
height:100px;
background-color:black;
color:white;
text-align:center;
margin:0auto;//針對(duì)塊級(jí)元素
}
不使用定位（1）
.second{
width:300px;
height:100px;
background-color:green;
}
.s_child{
width:150px;
line-height:100px;
}
不使用定位（2）
2.定位居中
a.父元素高度固定
父元素：相對(duì)定位
子元素：絕對(duì)定位
top:50%（父元素高度的一半）
left:50%
margin-top:自己的高度一半；（加負(fù)號(hào)）
margin-left:自己寬度的一半；（加負(fù)號(hào)）
.dw_one{
width:600px;
height:300px;
position:absolute;
background:black;
}
.dw_one_child{
background:white;
position:relative;
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
a
b.父元素高度不固定
.wrapper{
width:600px;
height:600px;
}
.dw_two{
width:100%;
height:100%;
position:absolute;
background:black;
}
.dw_two_child{
background:white;
position:relative;
top:50%;
left:50%;
width:100px;
height:100px;
transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
a
3.關(guān)于多行文本的居中
使用display:table;display:table-cell;
vertical-align:middle;居中
#outer{
width:200px;
height:200px;
background:#cccccc;
display:table;
_position:relative;//"_"為了兼容IE6
}
#inner{
display:table-cell;
vertical-align:middle;
_position:absolute;
_top:50%;
}
#content{
_position:relative;
_top:-50%;
}
感謝各位的閱讀，以上就是“HTML中元素居中要注意哪些事項(xiàng)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)HTML中元素居中要注意哪些事項(xiàng)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
