CSS 中，要使元素在页面上居中，可以使用 margin、transform 或者 Flexbox 等方式。以下是实现 CSS 左右上下居中的具体方法。

水平居中

要使元素在页面水平居中，可以使用 text-align、margin、display: flex 等方式。

/* text-align: center */
.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

/* margin: 0 auto */
.parent {
  width: 50%;
  margin: 0 auto;
}
.child {
  width: 100%;
}

/* display: flex */
.parent {
  display: flex;
  justify-content: center;
}
.child {
  /* 不设置宽度也可以居中 */
}

垂直居中

要使元素在页面垂直居中，可以使用 display: table-cell、display: flex 等方式。

/* display: table-cell */
.parent {
  display: table-cell;
  vertical-align: middle;
  height: 300px;
  text-align: center;
}
.child {
  display: inline-block;
}

/* display: flex */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
.child {
  /* 不设置高度也可以居中 */
}

水平垂直居中

要使元素在页面水平垂直居中，可以使用 position: absolute、transform: translate 等方式。

/* position: absolute */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* transform: translate */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上是 CSS 左右上下居中的汇总，根据实际情况选择相应的方式进行调整。