盒子水平垂直居中方案

// 公共部分
<div class="outer">
  <div class="inner"></div>
</div>

// 样式部分

// 方案1 flex 布局
.outer {
  width: 600px;
  height: 600px;
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 300px;
  height: 300px;
  background-color: deeppink;
}


// 方案2 定位 + transform translate
.outer {
  width: 600px;
  height: 600px;
  background-color: pink;
  position: relative;
}

.inner {
  width: 300px;
  height: 300px;
  background-color: deeppink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 方案3 使用 js 获取父元素的宽度和高度 设置子元素的 left、top值

// 方案4 盒子自身的宽度和高度 + margin + BFC
.outer {
  width: 600px;
  height: 600px;
  background-color: pink;
  overflow: hidden;
}

.inner {
  width: 300px;
  height: 300px;
  background-color: deeppink;
  margin-top: 150px;
  margin-left: 150px;
}

// 方案5 table-cell 单元格布局
.outer {
  width: 600px;
  height: 600px;
  background-color: pink;
  display: table-cell;
  vertical-align: middle;
}

.inner {
  width: 300px;
  height: 300px;
  background-color: deeppink;
  margin: auto;
}

// 方案6 定位 + left、right、top、bottom 为0
.outer {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  margin: auto;
  position: relative;
}
.inner {
  width: 300px;
  height: 300px;
  border: 1px solid green;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 必须要配合 margin: auto 实现 */
  margin: auto;
}