假設(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;
 }