水平居中，垂直居中，水平垂直居中

要实现水平居中，可以使用以下几种方法：

1.使用text-align属性：将要居中的元素的父元素设置为居中对齐。例如，对于块级元素，可以将父元素的text-align属性设置为center。

.parent {
  text-align: center;
}

2.使用margin属性: 将要居中的元素的左右外边距设置为auto。适用于具有固定宽度的块级元素。

.centered-element {
  margin-left: auto;
  margin-right: auto;
}

3.使用flexbox布局：将父元素设置为display: flex，并使用justify-content属性设置为center，使其子元素在主轴上水平居中。

.parent {
  display: flex;
  justify-content: center;
}

4.使用grid布局：将父元素设置为display: grid，并使用justify-items属性设置为center，使其子元素在网格容器内水平居中。（safari浏览器可能不适配）

.parent {
  display: grid;
  justify-items: center;
}

5.绝对定位和负边距：将要居中的元素设置为position: absolute，并通过设置左右边距为auto来实现水平居中。需要父元素设置为相对定位（position: relative）或其他合适的定位方式。

.centered-element {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

要实现垂直居中，可以使用以下几种方法：

1.使用flexbox布局：将父元素设置为display: flex，并使用align-items属性设置为center，使其子元素在交叉轴上垂直居中。

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

2.使用grid布局：将父元素设置为display: grid，并使用align-items属性设置为center，使其子元素在网格容器内垂直居中。

.parent {
  display: grid;
  align-items: center;
}

3.使用表格布局：将父元素设置为display: table和display: table-cell，并使用vertical-align属性设置为middle，使其子元素在表格单元格内垂直居中。

.parent {
  display: table;
}

.centered-element {
  display: table-cell;
  vertical-align: middle;
}

4.使用绝对定位和负边距：将要居中的元素设置为position: absolute，并通过设置上下边距为auto来实现垂直居中。需要父元素设置为相对定位（position: relative）或其他合适的定位方式。

.centered-element {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

实现水平垂直居中有多种方法，这里介绍几种常见的实现方式

1.使用 flex 布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2.使用绝对定位和 transform 属性：

.container {
  position: relative;
}

.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 3.使用表格布局：

.container {
  display: table;
  width: 100%; /* 可选，根据实际情况设置宽度 */
  height: 100vh; /* 可选，根据实际情况设置高度 */
}

.center-content {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

4. 使用grid布局：

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}