css垂直居中和水平居中

CSS中的垂直居中和水平居中是布局设计中的常见需求，尤其在响应式网页设计中。这里有几种常见的方法来实现元素的居中：

1. **Flexbox布局**：
- 对于行内元素，使用 `align-items: center` 和 `justify-content: center` 可以使子元素在交叉轴（通常是垂直方向）和主轴（通常是水平方向）上居中。

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

2. **Grid布局**：
Grid布局也有类似的属性 `align-items` 和 `justify-items`，适用于更复杂的网格排列。

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

3. **Positioning and Padding/Margins**：
使用绝对定位配合 `top`, `right`, `bottom`, `left` 属性，并设置外边距或内边距为 `auto`，对于静态定位的元素也能实现居中。

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

4. **表格单元格（`<table>`）**：
如果是表格布局，`<td>` 元素的 `vertical-align: middle` 和 `text-align: center` 可以使其在行和列上居中。

5. **CSS Flexbox + translateY/jTranslateY**：
对于非块级元素，可以通过 JavaScript 或 CSS Custom Properties 设置其父元素的 `transform` 属性来实现居中。

   .parent {
     display: flex;
     justify-content: center;
     align-items: center;
     transform: translateY(-50%);
   }

**相关问题--:**
1. Flexbox和Grid布局分别适用于哪种场景？
2. 绝对定位居中方式如何处理滚动内容？
3. CSS表格单元格居中方式适用于哪些类型的HTML结构？