css多列文本居中显示如何实现_Flexbox justify-content和align-items

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css多列文本居中显示如何实现_Flexbox justify-content和align-items

2025-12-06

浏览次数：次

返回列表

使用Flexbox可通过justify-content和align-items实现多列文本居中：1. justify-content: center使列在主轴水平居中；2. align-items: center在交叉轴垂直居中；3. 配合text-align: center使文本自身居中，需设置容器高度与gap间距，适用于多列布局且整体对齐效果直观灵活。

css多列文本居中显示如何实现_flexbox justify-content和align-items

要实现CSS多列文本的居中显示，使用Flexbox是最简单且高效的方式。通过 justify-content 和 align-items 两个属性，可以轻松控制主轴和交叉轴上的对齐方式。

1. 水平居中：justify-content

当有多列内容并希望它们在容器中水平居中时，使用 justify-content: center 可以让所有子元素在主轴方向（默认为横轴）上居中排列。

设置父容器为 display: flex
添加 justify-content: center 实现水平居中
适用于多列文本、按钮组或卡片布局

2. 垂直居中：align-items

如果希望每列内的文本在垂直方向上居中，比如多行文本或不同高度的列保持对齐，align-items: center 能让子元素在交叉轴（默认为纵轴）上居中。

同样在父容器上设置 display: flex
加上 align-items: center 实现垂直居中
注意：这会影响所有子项的整体对齐，若需单个元素居中可考虑单独设置

3. 完整示例代码

以下是一个典型的多列文本居中布局：

.container {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  height: 300px;              /* 设定高度以便看到垂直居中效果 */
  gap: 20px;                  /* 列间距 */
}
<p>.column {
text-align: center;         /<em> 文本自身居中 </em>/
width: 100px;
}</p>

HTML结构：

<div class="container">
  <div class="column"><p>第一列</p></div>
  <div class="column"><p>第二列</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2408">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176412720074643.png" alt="简小派">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2408">简小派</a>
                            <p>简小派是一款AI原生求职工具，通过简历优化、岗位匹配、项目生成、模拟面试与智能投递，全链路提升求职成功率，帮助普通人更快拿到更好的 offer。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="简小派">
                                <span>123</span>
                            </div>
                        </div>
                        <a href="/ai/2408" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="简小派">
                        </a>
                    </div>
                </div>
  <div class="column"><p>第三列</p></div>
</div>