垂直居中

1. display 布局

.box {
  display: flex;
  align-items: center;
}

2. 定位

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.content {
  width: 300px;
  height: 300px;
  background: orange;
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 50%; /*偏移*/
  transform: translateY(-50%);
}

3. 设置子元素的 line-height 值等于父元素的 height，这种方法适用于子元素为单行文本的情况。