css实现水平垂直居中的实现方案

在前端开发中，实现水平垂直居中的效果是常见的需求。以下是几种常见的实现方案：

1. 使用 flex 布局

将要居中的元素的父元素设置为 flex 布局，然后通过设置 justify-content 和 align-items 属性为 center，即可实现元素的水平垂直居中。

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

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

将要居中的元素的父元素设置为相对定位，然后将要居中的元素设置为绝对定位，再通过设置 top、left 属性为 50%，以及 transform 属性的 translate(-50%, -50%)，即可实现元素的水平垂直居中。

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

3. 使用 grid 布局

将要居中的元素的父元素设置为 grid 布局，然后通过设置 justify-items 和 align-items 属性为 center，即可实现元素的水平垂直居中。

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

4. 使用 table-cell 属性

将要居中的元素的父元素设置为 display: table，将其子元素设置为 display: table-cell，再通过设置 vertical-align 和 text-align 属性为 center，即可实现元素的水平垂直居中。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}