css盒子内文本居中对齐

在CSS中，让文本在盒子内居中对齐可以通过几种方法实现，主要取决于盒子的定位和布局方式。以下是一些常见的方法：

1. **`text-align: center`**：如果盒子是块级元素（如`<p>`、`<div>`等），可以将`text-align`属性设置为`center`，使文本水平居中。

.container {
   text-align: center;
}

2. **Flexbox布局**：对于使用Flexbox布局的容器，可以使用`align-items: center`让子元素垂直居中，`justify-content: center`让子元素水平居中。

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

3. **Grid布局**：对于Grid布局，可以分别设置`align-items`和`justify-items`属性。

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

4. **`vertical-align` 和 `line-height`**：对于行内元素，可以使用`vertical-align: middle`和适当设置`line-height`，但这种方法可能不适用于所有浏览器。

5. **绝对定位**：结合`position: absolute`和`top: 50%`, `left: 50%`, 再用`transform: translate(-50%, -50%)`可以让元素居中对齐。

.box {
   position: relative;
   transform: translate(-50%, -50%);
}

相关问题：
1. 在Flexbox和Grid布局中，如何区分垂直居中和水平居中？
2. 当元素不是块级元素而是行内元素时，如何实现居中对齐？
3. 使用`vertical-align`居中对齐时有哪些限制？