CSS 弹性盒子布局：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout 设置垂直位置：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items 设置水平位置：https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

设置div水平垂直位置.css

/**
 * 垂直水平居中
 * 可增加 flex-direction: column; 让div保持块级元素
 */
div {
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * 两端对齐并垂直居中
 */
div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******** 绝对定位方案（陈旧） ********/

/**
 * 垂直水平居中
 */
div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/**
 * 水平居中在底部
 */
div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}