.outer {
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  justify-content: center;  /* 上下居中 */
  height: 300px;  /* 必须设置高度 */
  background: #f0f0f0;
}
.inner {
  background: #ccc;
  padding: 10px;
}

✅ 优点：简单、现代、响应式
❌ 缺点：IE11 部分支持（需 -ms- 前缀）