css使用position垂直居中

CSS通过设置元素的`position`属性为`relative`, `absolute`, 或 `fixed`，并配合其他一些属性可以实现元素的垂直居中。以下是几种常见的方法：

1. **Flexbox**:
如果父容器的`display`属性为`flex`，子元素默认会垂直居中对齐。例如：

   .parent {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }
   .child {
     width: 100px;
     height: 100px;
   }

2. **Grid**:
同样，在CSS Grid布局下，只需设置`align-self` 属性为`center`即可：

   .parent {
     display: grid;
     place-items: center;
   }
   .child {
     width: 100px;
     height: 100px;
   }

3. **绝对定位 (Positioning with `top` and `bottom`)**:
子元素设为`position: absolute`，同时设置`top: 50%`和`transform: translateY(-50%)`来让其顶部位于父元素中心：

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

4. **内联块级元素 (Inline Block) with line-height**:
对于行内元素，可以利用`line-height`使其高度等于父元素高度，然后设置`vertical-align: middle`：

   .parent {
     line-height: 100%; /* 父元素高度等同于文字高度 */
   }
   .child {
     display: inline-block;
     vertical-align: middle;
   }