水平垂直居中

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
  <div></div>
</div>
<div class="box5">
  <div class="content">
    <div class="inner"></div>
  </div>
</div>

实现div水平垂直居中的几个方案
一、margin:auto实现绝对定位元素的居中，兼容性：ie7之前的版本不适用

.box1 {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

二、margin负间距

.box2 {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

三、transforms 变形 兼容性：ie8不支持

.box3 {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  /*定位父级的50%*/
  top: 50%;
  transform: translate(-50%, -50%);
  /*自己的50%*/
}

四、css不定宽水平垂直居中（高要设置）

.box4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box4 > div {
  background: #ff9;
  width: 200px;
  height: 200px;
}

五、table-cell布局 table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block; td的背景覆盖了橘黄色，不推荐使用

.box5 {
  background-color: #ff8c00;
  /*橘黄色*/
  width: 300px;
  height: 300px;
  display: table;
}

.content {
  background-color: #f00;
  /*红色*/
  display: table-cell;
  vertical-align: middle;
  /*使子元素垂直居中*/
  text-align: center;
  /*使子元素水平居中*/
}

.inner {
  background-color: #000;
  /*黑色*/
  display: inline-block;
  width: 20%;
  height: 20%;
}