居中方案

水平居中

文字

/* 适用于文字、链接、inline、inline-block、inline-table和inline-flex的元素。 */
#outer {
  text-align: center;
}

块级元素

#inner {
  margin: 0px auto;
}

多个块级元素

/* text-align 和 display */
#outer {
  text-align: center;
}
#inner {
  display: inline-block;
}

/* flex 实现，默认块级元素 */
#outer {
  display: flex;
  /* 按照主轴中心的位置对齐 */
  justify-content: center;
}

水平垂直居中

行内块元素（input、img）

.outerBox {
  float: left;
  width: 300px;
  height: 300px;
  background-color: black;

  /*核心*/
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.innerImg {
  width: 100px;
  height: 80px;
  background-color: white;
}

块级元素（div）

知道宽高，top、left设为 50% ，margin拉回宽高的一半

.father {
  float: left;
  width: 300px;
  height: 300px;
  background-color: greenyellow;

  /*核心*/
  position: relative;
}
.son {
  width: 100px;
  height: 80px;
  background-color: palevioletred;

  /*核心*/
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -50px;
}

未知宽高，绝对定位+margin

.father {
  float: left;
  width: 300px;
  height: 300px;
  background-color: plum;

  /*核心*/
  position: relative;
}
.son {
  width: 100px;
  height: 80px;
  background-color: cornflowerblue;

  /*核心*/
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

未知宽高，transform实现

.father {
  float: left;
  width: 300px;
  height: 300px;
  background-color: purple;

  /*核心*/
  position: relative;
}
.son {
  width: 100px;
  height: 80px;
  background-color: cornflowerblue;

  /*核心*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 布局实现

.father {
  display: flex;
  /* 按照主轴中心的位置对齐 */
  justify-content: center;
  /* 交叉轴水平位置对齐 */
  align-items: center;
}

总结

transform 和 flex 需要考虑兼容问题