HTML文本在div中怎么居中_HTML文本在div中如何快速实现居中显示

最常用方法是使用CSS实现div内文本居中。1. 水平居中用text-align: center；2. 单行垂直居中设置line-height等于容器高度；3. 推荐Flex布局，通过display: flex、justify-content: center和align-items: center实现水平垂直居中；4. 也可使用Grid布局，配合place-items: center简洁完成居中。根据需求选择合适方式，兼顾兼容性与灵活性。

让HTML文本在div中居中显示，最常用的方法是使用CSS控制文本的对齐方式。下面介绍几种简单有效的方式，帮助你快速实现水平居中、垂直居中或同时居中。

1. 水平居中文本

要使文本在div内水平居中，只需设置CSS的text-align: center;属性。

<div style="text-align: center;">
  这是一段居中的文字
</div>

适用于块级容器内的行内内容（如文字、图片等），是最简单且兼容性好的方法。

2. 垂直居中文本（单行）

对于单行文本，可以通过设置line-height等于div的高度来实现垂直居中。

立即学习“前端免费学习笔记（深入）”；

<div style="height: 50px; line-height: 50px; text-align: center;">
  居中的单行文字
</div>

注意：line-height的值需与容器高度一致，适合固定高度的场景。

Project IDX

Google推出的一个实验性的AI辅助开发平台

113

查看详情

3. 水平垂直都居中（推荐Flex布局）

使用Flexbox可以轻松实现文本在div中完全居中，无论文本行数多少。

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
  完全居中的文字
</div>

• justify-content: center; —— 水平居中
• align-items: center; —— 垂直居中

这种方法灵活、现代，适合响应式布局。

4. 使用网格布局（Grid）

CSS Grid也能实现居中，适用于复杂布局场景。

<div style="display: grid; place-items: center; height: 100px;">
  居中文字
</div>

place-items: center; 简洁地实现了内容在两个方向上的居中。

基本上就这些。根据实际需求选择合适的方法：简单居中用text-align，单行文本可用line-height，推荐使用Flex布局实现更灵活的居中效果。不复杂但容易忽略细节，比如容器是否有固定高度或是否需要兼容老浏览器。

以上就是HTML文本在div中怎么居中_HTML文本在div中如何快速实现居中显示的详细内容，更多请关注php中文网其它相关文章！