使用Flexbox或Grid实现多行文字垂直水平居中，配合text-align和media queries优化响应式布局，确保各屏幕下居中与可读性。
实现多行文字在容器中居中，特别是在响应式网页设计中，需要结合 text-align、line-height、flexbox 或 grid 等技术，并配合 media queries 适配不同屏幕尺寸。虽然 text-align: center 只能实现水平居中，且对块级元素内的文本有效，但要真正实现多行文字的**垂直+水平居中**，还需其他方法辅助。
1. 使用 Flexbox 实现多行文字完全居中（推荐）
Flexbox 是目前最简单、最可靠的多行文字居中方案，兼容性良好，适合响应式布局。
示例代码：.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
text-align: center; /* 防止长文本换行时不对齐 */
height: 200px; /* 设定容器高度便于展示效果 */
border: 1px solid #ccc;
}
这样无论是一行还是多行文字，都能在容器中完美居中。同时 text-align: center 能确保换行后的每一行内容仍保持居中对齐。
2. 结合 Media Queries 优化响应式表现
在小屏幕上，可能需要调整字体大小或容器高度，避免文字溢出或间距过紧。通过 media queries 动态调整样式。
立即学习“前端免费学习笔记（深入）”；
响应式设置示例：@media (max-width: 768px) {
.container {
padding: 10px;
font-size: 14px;
height: 150px;
}
}
@media (max-width: 480px) {
.container {
font-size: 12px;
height: 120px;
line-height: 1.4;
}
}
这样可以在不同设备上保持良好的可读性和视觉居中效果。
3. 替代方案：使用 Grid 布局
CSS Grid 同样可以轻松实现居中，适用于更复杂的布局场景。
Grid 居中写法：.container {
display: grid;
place-items: center; /* 简写：垂直 + 水平居中 */
text-align: center;
height: 200px;
border: 1px solid #ddd;
}
此方法简洁现代，适合现代浏览器环境。
4. 传统方法：text-align + line-height（仅限单行）
text-align: center 配合 line-height 只适合单行文本垂直居中，多行无效。
.single-line {
text-align: center;
line-height: 200px; /* 与容器高度一致 */
height: 200px;
}
一旦内容换行，line-height 会导致行距异常，失去居中效果。
基本上就这些。用 Flexbox 或 Grid 主导居中逻辑，text-align: center 辅助文本对齐，再通过 media queries 调整断点样式，就能实现真正响应式的多行文字居中效果。不复杂但容易忽略细节。
