在css中如何用flex实现多行文字居中-css教程-PHP中文网

在css中如何用flex实现多行文字居中

P粉602998670

发布： 2025-10-01 12:25:02

原创

575人浏览过

使用Flexbox实现多行文字居中需设置容器display: flex，结合justify-content: center和align-items: center实现水平垂直居中，同时添加text-align: center确保换行后每行居中，并为容器设定固定高度或足够空间以保证居中效果。

在css中如何用flex实现多行文字居中

在 CSS 中使用 Flexbox 实现多行文字居中，关键是将容器设置为 flex 布局，并同时在主轴和交叉轴上进行居中对齐。

1. 基本结构

假设你的 HTML 结构如下：

<div class="flex-center">
这是一段可能有多行的文字内容
</div>

2. 使用 Flex 实现垂直和水平居中

给外层容器设置以下 CSS 样式：

.flex-center {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 需要固定高度或由父元素决定 */
  text-align: center; /* 确保换行时每行都居中 */
  max-width: 300px;
  margin: 0 auto;
}

说明：