<div class="parent">
  <div class="child">
  hehehe
  </div>
</div>

1.水平居中

a.子元素是内联元素时，对父元素设置text-align为center。示例

.parent{
  border: 1px solid blue;
  margin: 0 auto;
  text-align:center;
}
子元素是固定宽度对div时，设置左右margin为一样对

b.利用绝对定位，设置子元素偏移量为剩下宽度的一半。示例

.parent{
  border: 1px solid blue;
  position:relative;
  height:100px;
}
.child{
  position:absolute;
  border: 1px solid red;
  left:50%;
  transform:translateX(-50%); 
}

2.垂直居中

a.子元素的上下margin设置为相同。示例

.parent{
  border:1px solid green;
}
.child{
  border:1px solid red;
  margin: 10px 0;
}

b.绝对定位，设置子元素的top为50%，transform:translateY(-50%)。示例

.parent{
  border:1px solid green;
  position:relative;  
  height:100px;
}

.child{
  border:1px solid red;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}