css父元素position:relative 子元素如何垂直居中

当CSS父元素的`position`属性设置为`relative`时，可以利用`position: absolute`来实现子元素的垂直居中。通常的做法是结合`top`, `bottom`, 或者`margin-top`和`margin-bottom`来调整子元素的位置。以下是几种常见的方法：

1. **使用绝对定位**:

   .parent {
     position: relative;
     height: some-height; /* 父元素需要设定高度 */
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%); /* 负50%将子元素上移自身高度的一半实现垂直居中 */
     width: 100%; /* 或根据需要设置宽度 */
   }

2. **使用Flexbox布局** (适用于现代浏览器):

   .parent {
     display: flex;
     align-items: center; /* 中心对齐 */
     justify-content: center; /* 水平居中 */
   }

3. **使用Grid布局** (同样适用于现代浏览器):

   .parent {
     display: grid;
     place-items: center; /* 自动垂直和水平居中 */
   }