首先确保父容器设置display: flex，再应用align-items: center和justify-content: center实现居中；其次确认容器有高度（如height: 100vh），子元素未脱离文档流；最后为图片设置max-width: 100%避免溢出。
在使用 CSS 响应式布局时，如果图片和文字无法垂直居中，即使写了 align-items: center 和 justify-content: center，问题通常出在容器的 Flex 布局没有正确启用或结构有误。以下是常见原因和解决方法。
确保父容器是 Flex 布局
要让 align-items 和 justify-content 生效，父元素必须设置为 display: flex。如果忘了这一步，居中将不会生效。
- 检查父容器是否设置了 display: flex
- 确认没有拼写错误或被其他样式覆盖
示例代码：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 确保容器有高度 */
}
检查子元素是否影响布局
图片过大或文字块设置了固定高度/行高，可能会影响居中效果。尤其是图片未设置 max-width: 100% 或自带 margin，在响应式下容易错位。
立即学习“前端免费学习笔记（深入）”；
- 给图片添加 max-width: 100% 和 height: auto
- 避免子元素使用 float 或 position: absolute 脱离文档流
确保容器有明确的高度
Flex 居中依赖容器有可计算的高度。如果父容器高度为 0，内容再怎么设置也无法居中。
- 可以设置 height: 100vh（视口高度）
- 或在响应式中使用 min-height: 300px 等最小高度
响应式下的适配建议
在不同屏幕尺寸下，可能需要调整对齐方式。可以用媒体查询微调。
@media (max-width: 768px) {
.container {
flex-direction: column;
text-align: center;
}
}
基本上就这些。只要确保容器是 Flex、有高度、子元素不干扰，align-items 和 justify-content 就能正常工作。不复杂但容易忽略细节。
