css设置文字居中的两种方法

最常用且实用的两种CSS文字水平居中方法是text-align: center和flexbox布局。前者适用于块级容器内行内元素的居中，只需设置父容器text-align: center即可实现文字、图片等内容的水平居中；后者通过display: flex、justify-content: center和align-items: center可实现子元素（包括块级元素）真正的水平垂直居中，灵活性更强，适用复杂布局场景。

让文字在容器中水平居中，最常用且实用的两种 CSS 方法是：text-align: center 和 flexbox 布局。它们适用场景不同，选对方法才能事半功倍。

用 text-align: center 实现行内内容居中

这是最简单直接的方式，适用于块级容器（如 p、p、header）内部的纯文字、图片、按钮等行内级元素。

• 只需给父容器设置 text-align: center，子元素中的文字就会水平居中
• 注意：它只影响行内内容的**行内对齐**，不影响块级子元素自身的宽度或位置
• 例如：p { text-align: center; } —— 里面的所有 span、img、a 标签都会居中显示

用 flexbox 实现真正意义上的居中（含垂直）

当需要同时水平+垂直居中，或者要精确控制子元素（尤其是块级元素）的位置时，flexbox 更可靠。

标签： css 垂直居中