假設(shè)有如下html結(jié)構(gòu)
<div class="header">
<div class="item"></div>
</div>
一型奥、實現(xiàn)item在header內(nèi)水平居中
1、item定寬度
.header {
width: 100%;
height: 60px;
}
.item {
width: 60px;
margin: 0 auto;
}
2噪沙、item不定寬度
ps: margin-left 回撤多少px需要根據(jù)具體情況微調(diào)
.header {
width: 100%;
height: 60px;
position: relative;
}
.item {
position: absolute;
left: 50%;
margin-left: -30px;
}
二别伏、item在header內(nèi)垂直居中
1莹规、
.header {
width: 100%;
height: 60px;
position: relative;
}
.item {
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
2赔蒲、
ps: item設(shè)置float后，調(diào)節(jié)margin-top值就可以實現(xiàn)居中
.header {
width: 100%;
height: 60px;
}
.item {
float: left;
margin-top: 10px;
}
3良漱、
ps: 利用header的padding屬性來實現(xiàn)item居中舞虱，要注意的是，header的高要除去padding的值母市，也就是等于item的高
.header {
width: 100%;
height: 40px;
padding: 10px 0;
}
.item {
height: 40px;
}
