子盒子再父盒子里居中

当你想让子元素（如`<div>`或其他块级元素）在其包含的父元素内部水平垂直居中对齐时，在CSS中可以使用几种常见的方法：

1. **Flexbox布局**:
如果父元素是`display: flex;`且设置了`justify-content: center;`和`align-items: center;`，那么子元素就会自然居中。

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
.child {
   /* 子元素样式 */
}

2. **Grid布局**:
同样，如果父元素是`display: grid;`并且设置了`place-items: center;`，则子元素会居中。

.parent {
   display: grid;
   place-items: center;
}
.child {
   /* 子元素样式 */
}

3. **绝对定位** (相对于非流体容器):
使用`position: absolute;`, `top: 50%; left: 50%;`然后通过负边距（`transform: translate(-50%, -50%);`）来实现居中。

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

4. **表格布局** (`display: table-cell;`):
对于行内元素，可以将父元素设为`display: table;`，子元素设置为`display: table-cell;`并添加`vertical-align: middle;`。

.parent {
   display: table;
   width: 100%;
}
.child {
   display: table-cell;
   vertical-align: middle;
}