如何实现水平垂直居中？

在前端开发中，实现元素的水平垂直居中是一个常见的需求，以下是几种常见的实现方式：

• 使用绝对定位和负边距：将元素的position设置为absolute，然后通过top、left属性将其定位到父元素的中心位置，再使用负的margin值来调整元素自身的偏移，使其水平垂直居中。例如：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 假设子元素高度为100px */
  margin-left: -50px; /* 假设子元素宽度为100px */
}

• 使用绝对定位和transform：同样先将元素的position设置为absolute，利用top和left属性定位到父元素中心，然后通过transform属性的t